Change CSS dropdown menu color when any child is hovered

Question

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

HTML

<ul id="main-navigation">
                <li class="active"><a href='#'>Plans</a>
                    <ul>
                    <li><a href='#'>Sub Link 1</a></li>
                    <li><a href='#'>Sub Link 2</a></li>
                    </ul>
                </li>
                <li><a href='#'>How it Works</a></li>
                <li><a href='#'>About</a>
                    <ul>
                    <li><a href='#'>Sub Link 1</a></li>
                    <li><a href='#'>Sub Link 2</a></li>
                    <li><a href='#'>Sub Link 3</a></li>
                    <li><a href='#'>Sub Link 4</a></li>
                    </ul>
                </li>
                <li><a href='#'>Testimonials</a>
                    <ul>
                    <li><a href='#'>Sub Link 1</a></li>
                    <li><a href='#'>Sub Link 2</a></li>
                    <li><a href='#'>Sub Link 3</a></li>
                    <li><a href='#'>Sub Link 4</a></li>
                    </ul>
                </li>
                <li><a href='#'>FAQ</a></li>
                <li><a href='#'>Contact</a></li>
            </ul>

CSS

#main-navigation {
    background: #FFF;
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 100px;
    float: right;
    font-size: 18px;
}

#main-navigation li {
    float: left;
}

#main-navigation>li {
    line-height: 100px;
    background-color: #FFF;
    margin-left: 10px;
}

#main-navigation>li>ul>li {
    line-height: 30px;
    background: #FFF;
    margin-left: 0px;
    border-bottom: 1px solid #999;
    position: relative;
    z-index: 100;
}

#main-navigation li a {
    padding: 0px 12px;
    display: block;
    text-decoration: none;
    color: #6d6e71;
}

#main-navigation ul {
    position: absolute;
    left: -9999px;
    top: -9999px;
    list-style-type: none;
    margin: 0;
}

#main-navigation li:hover {
    position: relative;
    background: #10b794;
}

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

#main-navigation li:hover ul {
    left: 0px;
    top: 100px;
    background: #10b794;
    padding: 0px;
}

#main-navigation li:hover ul li a {
    padding: 5px;
    display: block;
    width: 168px;
    text-indent: 15px;
    background: #10b794;
}

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

#main-navigation li.active {
    border-bottom: 4px solid #10b794;
    height: 96px;
}

As you can see, the text color changes to white when and individual item is hovered over. What I would like to do is have the text color of both the main <li> as well as the submenu items change to white if any part of that menu/submenu is hovered over. If someone hovers over 'Plans' in the menu, all the submenu links should have white text as well. If this possible with CSS selectors alone or do I need to look into a JS solution?

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

Answer 2

You must add this to your css

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

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