html - 悬停在下拉菜单上时如何激活主导航项？

Question

当用户将鼠标悬停在下拉菜单上时，我试图保持主导航项处于活动状态。但是，它不像仅仅定位那么简单li:hover{}

出于内容管理的原因，我们在 HTML 而不是 CSS 中拥有导航的图像精灵。这是HTML：

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

这是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;}

知道当用户将鼠标悬停在下拉菜单上时如何定位 img 吗？所以用户悬停在上面.nav ul li.dropdown ul li:hover，我需要调整代码span.clip img？

谢谢！杰森

Answer 1

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.

Answer 2

尝试这个：

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