CSS fix for drop down

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

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

you have to add the class to the link in the html, just like the services link. it wont work otherwise.

ASKER

To be honest I am not really sure where to put that. These are all PHP files since it is a wordpress site.

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;
}

ASKER

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?

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?

ASKER

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...

ASKER

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

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;
}

ASKER

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.

ASKER

I see why it isnt working on events because it is in the m-3 spot on that section

ASKER

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;

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

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.

ASKER

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.

ASKER

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;