Question about menu hover colour

Hi there,

I have a question about the colour of a menu bar when you hover over it. The website is: Woodland Print & Design |. Not live yet!

When you’re on the home page for example and hover over About Us and the sub menu items it changes to red. However if you go to Woodland Print & Design | about us and then hover over About Us and the sub menu items the colour doesn’t change. However, the colour then changes when hovering over other menu items. It appears the on hover effect if not set for the active menu.

Can anyone please advice how to enable this via css. The existing code is here (http://woodlandprint.com/woodl2011/w...rint/style.css). Any help would be greatly appreciated. Thank you.

Hi, Welcome to Sitepoint :slight_smile:

The hover color isn’t showing because you have over-ruled it with the current class addition that gives more weight to the rule.

You can over-ride it like this.


.nav li li a:hover{
background:#891D02!important; 
}

I don’t usually like using !important but in this case its simpler than the alternative and it seems you always want the nested anchors to change color anyway.

Hi Paul,

Thank you sincerely for your help. That has done the trick and has saved me a lot of hassle. Thank you again.