Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS fix for drop down

Posted on 2013-01-07
16
Medium Priority
?
234 Views
Last Modified: 2013-03-18
I have a site that I am working on and I cant figure out where to make a simple change... I have a drop down menu that has a gray overlay when you roll over the selection and then the dropdown appears. If you look at http://www.brillianteventplanning.com/nyc-wedding.html the services menu item is correct and the About is not. I want to mimic the services dropdown... There is a dropdown.css that I have been working with. I have attached the code from that file. Also have attached the style.css. Any help is greatly appreciated
dropdown.css
style.css
0
Comment
Question by:eli290
  • 10
  • 6
16 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 1500 total points
ID: 38751846
on line 114 of dropdown.css, the grey bg image for services menu is defined. You need to do the same thing for the about menu.

li:hover a.menu-service, a:hover.menu-service {
background: url(../images/menu_services.png) no-repeat top !important;
}

add a class to the about link:

<a href="#" class="top_menu_link menu-about"><span>ABOUT</span></a>

Open in new window


and define the rule:

li:hover a.menu-about, a:hover.menu-about {
  background: url(../images/menu_services.png) no-repeat top !important;
}

Open in new window

0
 

Author Comment

by:eli290
ID: 38752006
Ok  I did what you said but it didnt work. Here is the updated dropdown.css file to show my changes

Also on the About link this is what I did,

On the menu I added the class to the url within wordpress which didnt work and then I added it to the optional css class section on the menu which also didnt change anything
dropdown.css
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38752049
you have to add the class to the link in the html, just like the services link. it wont work otherwise.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:eli290
ID: 38752074
To be honest I am not really sure where to put that. These are all PHP files since it is a wordpress site.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38752148
You could also apply the css globaly to all menu items:

#main-menu > li:hover a{
  background: url(../images/menu_services.png) no-repeat top !important;
}
0
 

Author Comment

by:eli290
ID: 38752340
Yes that worked however I dont really want to do that for all menu items. Only for the drop downs :(

Do you know where I could add that on just for the about page?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38752373
then you need to do what I initially posted, and add the class to the link. How was the class added to the services link?
0
 

Author Comment

by:eli290
ID: 38752386
That I am not sure about. I didnt create this site, I was only asked to make a few changes after the fact. Of course the developer is nowhere to be found so I am trying to do this blind...
0
 

Author Comment

by:eli290
ID: 38752400
I am not sure if this helps but i believe in the dropdown.css line 65-92 are the menu items. I had to change li.m-7 to left justify the drop down menu items on the about link
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38752432
You can use m-7 to target the about link, if you want. But if later you decide to change the order of the links, you'll also have to change that too.

#main-menu > li.m-7:hover a{
  background: url(../images/menu_services.png) no-repeat top !important;
}

Open in new window

0
 

Author Comment

by:eli290
ID: 38752553
Ok I did that and it sort of worked. This site is so screwy. There are 3 different sections...

http://www.brillianteventplanning.com/nyc-wedding.html

http://www.brillianteventplanning.com/nyc-proposal.html

http://www.brillianteventplanning.com/nyc-events.html

The wedding and proposal sort of work but it added another box in the drop down. And on events it doesnt show up at all.
0
 

Author Comment

by:eli290
ID: 38752587
I see why it isnt working on events because it is in the m-3 spot on that section
0
 

Author Comment

by:eli290
ID: 38752650
I also think the reason why it is funky is because the size of the image being used is 109 wide and in the dropdown.css file I see

a.top_menu_link-2 {
 width:109px;
 text-align:center;

Open in new window


a.menu-service {
 width:109px;
 text-align:center;

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38752666
sounds like you can probably figure it out from here. its a shame the whole menu has to be so convoluted, but thats the price of working with a framework.
0
 

Author Comment

by:eli290
ID: 38755799
I figured out what the problem is but I am not sure how to fix it... I have been working with wordpress for a while now and have never had an issue like this before.
0
 

Author Comment

by:eli290
ID: 38755924
Ok i got the tabe to show by creating a copy of the menu_services.png and naming it menu_about.png. Then changing line 121
#main-menu > li.m-7:hover a{
  background: url(../images/menu_about.png) no-repeat top !important;

Open in new window


However for some reason it is showing another box to the right. Also when you roll over the About tab it turns red but turns grey again once you move your mouse to a sub menu item. How would I keep it red when it is dropped down?
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
While Plesk offers many potential benefits to website administrators, including compatibility with Windows Server and other leading technologies, the company has also been working to differentiate it from other control panels for content management…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question