Styling Menu Classes

Here is my basic html/css that I wrote up.

https://jsfiddle.net/behr9q26/1/

As you can see, hovering over a menu item changes the background color to blue, and the link color to white.

And for the nested menu items, whatever its parent is remains highlighted as well.

If, say, I’m on the page that corresponds to the deepest nested item, I’d like all those previous parents to remain highlighted as well. Just like in the plain html/css.

I think I have achieved this.

But I’m having trouble getting the text colors to remain the correct colors when they are in these various states. Sometimes they will be highlighted but have the dark text, other times the non-highlighted items will have the light text.

Here’s my most recent bit of css for that:

#nav .current-menu-item {
    background-color:#4C9ED9;
} /* the current Page */

#nav .current-menu-item a {
    color: #fff;
}

#nav .current-menu-parent {
    background-color:#4C9ED9;
} /* the current Page */

#nav .current-menu-parent a {
    color: #fff;
} 

#nav ul li.current-menu-ancestor {
    background-color: #4C9ED9;
}

#nav ul li.current-menu-ancestor a {
    color: #fff;
}

This is basically my cleaned up, “least broken” attempt. Currently, when I’m on a nested page and I look at the menu I’m in, the items that aren’t highlighted have the light text, when they should have the dark text.

And every time I try to figure out the specificity to make those un-highlighted items dark again I just make it worse and worse.

I hope I’ve been clear, I think if you look at my original code up there you will kind of get an idea of what I’m talking about, and what my intent is.

If someone could tell me what I need to add to those classes to get this to work, I’d appreciate it.