Question

I am in the process of styling a navigation. This navigation has a sub-menu dropdown, with the potential of a secondary dropdown within that dropdown. In essence I have two layers of sub-navigational items.

Here is my problem: I have a hover state on my outermost parent item, lets call it “About Us”. A dropdown menu beneath it appears with further links, when I move the mouse into this dropdown, a different hover state activates for those links. My problem, is the hoverstate on the “About Us” link disappears. I want that hover state to stay active. So far this navigation is purely done with CSS, no javascript is used, and I would like to stick with CSS completely if possible.

Each UL has a class, for example .main-nav for the parent UL, and .main-sub-nav for the subnav elements.

Trying to be creative, I thought I could say for example(the example assumes #ccc is the highlight color for the parents hover state:

.main-nav li a:hover {background: #ccc;}    
.main-sub-nav li a:hover .main-nav li a {background: #ccc;}

This doesnt work, I assume because I am trying to reference a parent element from a child element, it doesn’t understand what I am doing. Is there a similar method to what I am doing above to achieve this?

Sample HTML Structure:

<nav>
    <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul class="main-sub-nav">
                <li><a href="#">About Sub 1</a></li>
                <li><a href="#">About Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

You can see this code in full at the following dev site: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

Note when you hover over About us, and move your mouse down into the subnav, the highlight on about us disappears.

Like I said I’d like to solve this with purely CSS, and preferably, without adding classes to anything. This becomes complicated as this nav is generated fully with PHP and adding more classes just gets nasty.

Answer 1

I think this should solve the problem,

.main-nav > li:hover > a {background: #ccc;}   

DEMO