Change CSS Dropdown Menu Color When Any Child Is Hovered

I have a basic CSS dropdown menu that looks like this: http://jsfiddle.net/qfTt3/ (same code below) HTML

• &l

Solution 1:

You want to change:

#main-navigation li a:hover {
    color: #FFF;
}

to be:

#main-navigation li:hover > a {
    color: #FFF;
}

JSFiddle here.

Basically, you want the a element's color to change when you are hovered over the list item. That way, when you hover over other submenu items, you're still hovering over the li containing the submenu.

I use the child selector > so that the submenu item links are not affected when you're hovering over the main menu item link.

---

To target the Plans submenu link colors, you should apply the styling to a class to specifically target them. Since you already have a class specifically on Plans (.active), I'll just use that for demonstration purposes.

CSS:

#main-navigation li:hover > a, #main-navigation .active:hover a {
    color: #FFF;
}

JSFiddle here.

I get rid of the child selector when targeting .active so that it makes all child a elements white when hovering over the main link.

Solution 2:

You must add this to your css

#main-navigation > li:hover > ul > li > a {
    color: #FFF;
}

http://jsfiddle.net/sijav/qfTt3/1/