Is there a way to keep the main navigation item activated when a user hovers over the dropdown menu? It seems like just targeting li:hover{} is not working as expected.
Due to content management reasons, our navigation image sprite is in the HTML instead of CSS. Here is the HTML code:
<div class="nav">
<ul>
<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>
<ul>
<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>
</ul>
</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>
</ul>
</div>
And here is the corresponding 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;}
Do you have any suggestions on how to target the image when a user hovers over the dropdown menu? Specifically, adjusting the code for span.clip img while hovering over .nav ul li.dropdown ul li:hover?
Thank you! Jason