드롭 다운에서 마우스를 가져 가면서 메인 탐색 항목을 활성화하는 방법은 무엇입니까?

Question

사용자가 드롭 다운 위로 마우스를 이동하는 동안 기본 탐색 항목을 활성 상태로 유지하려고합니다. 그러나 단지 목표로 삼는 것만 ​​큼은 아닙니다. li:hover{}

콘텐츠 관리상의 이유로 Google은 HTML이 아닌 CSS에 탐색의 이미지 스프라이트를 가지고 있습니다. 여기

<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을 대상으로 여기에 HTML은? 따라서 사용자가 .nav ul li.dropdown ul li:hover 위로 마우스를 올려 놓고 span.clip img에 대한 코드를 조정해야합니까?

감사합니다. Jason

Answer 1

우리는 이미지가 어떻게 보이는지보기 위해이 예제를 볼 수 있습니다. 아마도 당신이 아이 조합자를 사용해야 할 것 같아요. 아마도 nav ul> li.dropdown a : hover span.clip과 같을 것입니다.

Answer 2

이 시도 :

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