向下移動到子菜單時是否將頂層菜單保持懸停狀態？

Question

我有2個子級別的水平菜單。當我向下移動時，我想保持頂層菜單處於懸停狀態。

我已經創建了jsfiddle。 link to the JsFiddle

HTML代碼：

<div> 
    <ul id="nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Products</a> 
      <ul class="child"> 
       <li><a href="#">Hard Drives</a></li> 
       <li><a href="#">Monitors</a></li> 
       <li><a href="#">Speakers</a> 
        <ul class="child"> 
         <li><a href="#">10 watt</a></li> 
         <li><a href="#">20 watt</a></li> 
         <li><a href="#">30 watt</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Random Equipment</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Services</a> 
      <ul class="child"> 
       <li><a href="#">Repairs</a></li> 
       <li><a href="#">Installations</a></li> 
       <li><a href="#">Setups</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

和CSS代碼是

> body { 
} 
#nav li { 
    list-style:none; 
    float: left; 
} 
#nav li a { 
    display: block; 
    padding: 8px 12px; 
    text-decoration: none; 
} 
#nav li a:hover { 
    opacity:1; 
} 

/* Targeting the first level menu */ 
#nav { 
    min-width:850px; 
    background:#fff; 
    opacity:0.5; 
    display: block; 
    height: 34px; 
    z-index: 100; 
    position: absolute; 
} 
#nav > li > a { 
} 

/* Targeting the second level menu */ 
#nav li ul { 
    color: #333; 
    display: none; 
    position: absolute; 
    width:850px; 
} 
#nav li ul li { 
    display: inline; 
} 
#nav li ul li a { 
    background: #fff; 
    border: none; 
    line-height: 34px; 
    margin: 0; 
    padding: 0 8px 0 10px; 
} 
#nav li ul li a:hover { 
    opacity:1; 
} 

/* Third level menu */ 
#nav li ul li ul{ 
    top: 0; 
} 
ul.child { 
background-color:#FFF; 
} 
/* A class of current will be added via jQuery */ 
#nav li.current > a { 
    background: #f7f7f7; 
    float:left; 
} 
/* CSS fallback */ 
#nav li:hover > ul.child { 
    left:0; 
    top:34px; 
    display:inline; 
    position:absolute; 
    text-align:left; 
} 
#nav li:hover > ul.grandchild { 
    display:block; 
} 

有人可以指導我該怎麼做？

謝謝。

Answer 1

從

#nav > li > a:hover 

選擇更改爲

#nav > li:hover > a 

而且

#nav li ul li a:hover 

到

#nav li ul li:hover > a