Remove Highlight from Drop Down Menu Main Item

HTML & CSS
1

Hi

I have a horizatonal menubar containing “About” “Events” “Customer Service” etc.

When the user hovers over the “About” the menu, a sub-menu appears.

However the top level menu item “About” highlights and I want it the color to stay as “Black”.

I have attached a screenshot of the issue and the css file.

Thanks in advance for the help.

2

Hi,

Usually you would want the top item to match the dropdown like that so that you can see easily to what the dropdown refers. To remove that function then remove this code:


li:hover a { background: #d9d4bc; }

If you want a hover effect on the top row anchor only then use something like.


#nav > li > a:hover {color:#f00 }

That assumes your nav is called #nav of course. Note that in the attachement you posted you did not have a class or id prefix so the rules would apply to all lists in the site which is not what you want.