How to have main nav item active while hovering over dropdown?

By : JBagley

I'm trying to keep the main nav item active while a user hovers over the dropdown. However, its not as straight forward as just targeting li:hover{}

For content managed reasons, we have the image sprite of our navigation in the HTML and not CSS. Here is the HTML:

<div class="nav">
    <li class="dropdown"><a href="#"><span class="clip"><img src="css/img/nav-products.png" alt="nav-products" width="81" height="243"></span><span class="link">Our Products</span></a>
            <li><a href="#"><img src="css/img/product.jpg" /><span>Laptops</span></a></li>
            <li><a href="#"><img src="css/img/product.jpg" /><span>Tablets</span></a></li>
    <li><a href="#"><span class="clip"><img src="css/img/nav-buy.png" alt="nav-buy" width="81" height="162"></span><span class="link">Where to Buy</span></a></li>

Here is the CSS:

.nav ul li a{padding: 0px; height: 81px; width: 81px;}
.nav ul li a span.clip{height: 81px; width: 81px; display: block; overflow: hidden;}
.nav ul li a span.clip img{position: relative; top: -81px;}
.nav ul li a:hover span.clip img{position: relative; top: 0px;}
.nav ul li.dropdown a:hover span.clip img{position: relative; top: -162px;}

Any idea how to target the img while the user is hovering over the dropdown? So the user is hovering over .nav ul li.dropdown ul li:hover and I need to adjust the code for the span.clip img?

Thanks! Jason

By : JBagley


Any chance we can see a live example of this to see what the images look like. I'm thinking maybe you are going to have to use a child combinator, maybe like `nav ul > li.dropdown a:hover span.clip but its hard without a working example.

By : mToce

Try this:

.nav ul li.dropdown:hover span.clip img {
    // styles here

This video can help you solving your question :)
By: admin