CSS下拉菜單 - 子菜單懸停文字顏色繼承

Question

我一直在一個CSS下拉菜單，但我正在努力與子菜單的文字顏色。

正如所料，子菜單背景顏色保持懸停顏色，但文本恢復爲非懸停狀態。

例如，徘徊項目9時，我需要在文本「菜單，第3項和第6項」是相同的（白）作爲第9項

我想，這是一個繼承問題，但似乎無法弄清楚。

這裏是CSS

.clearboth { 
    margin: 0; 
    padding: 0; 
    clear: both; 
} 
#nav { 
    font-family: sans-serif; 
    font-size: 12pt; 
    color: #666666; 
    line-height: 1.0; 
} 
#nav a { 
    display: block; 
    padding: 6px 8px; 
} 
#nav a:link { 
    color: #666666; 
    text-decoration: none; 
} 
#nav a:visited { 
    color: #666666; 
    text-decoration: none; 
} 
#nav a:hover { 
    color: white; 
    text-decoration: none; 
} 
#nav ul { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    left: -1px; 
} 
#nav ul ul { 
    position: absolute; 
    visibility: hidden; 
    border: solid 1px gray; 
} 
#nav ul ul ul { 
    position: absolute; 
    visibility: hidden; 
    left: 100%; 
    top: -2px; 
    border: solid 1px gray; 
} 
#nav li.menu { 
    float: left; 
    background-color: white; 
    margin-right: 0px; 
    position: relative; 
    border: solid 1px gray; 
    border-radius: 10px; 
    width: 100px; 
    text-align: center; 
} 
#nav li.menu:hover { 
    background-color: #66a3e0; 
    border-radius: 0px; 
    text-align: left; 
} 
#nav li { 
    float: left; 
    position: relative; 
    background-color: white; 
    width: 100px; 
    margin-top: 0px; 
    margin-right: 0px; 
} 
#nav li li { 
    float: left; 
    position: relative; 
    background-color: white; 
    width: 100px; 
    margin-top: 0px; 
    margin-right: 0px; 
} 
#nav li:hover { 
    background-color: #66a3e0; 
    color: white; /* No effect. Inheritance? */ 
} 
#nav li li:hover { 
    background-color: #66a3e0; 
    color: white; /* No effect. Inheritance? */ 
} 
#nav li:hover > ul { 
    visibility: visible; 
} 
.right-arrow { 
    float: right; 
} 

和HTML

<div id="nav"> 
    <ul> 
     <li class="menu"><a href="#">Menu</a> 

      <ul> 
       <li><a href="#">Item 1</a> 
       </li> 
       <li><a href="#">Item 2</a> 
       </li> 
       <li><a href="#">Item 3<span class="right-arrow">&#9658;</span></a> 

        <ul> 
         <li><a href="#">Item 4</a> 
         </li> 
         <li><a href="#">Item 5</a> 
         </li> 
         <li><a href="#">Item 6<span class="right-arrow">&#9658;</span></a> 
          <ul> 
           <li><a href="">Item 7</a> 
           </li> 
           <li><a href="">Item 8</a> 
           </li> 
           <li><a href="">Item 9</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <br class="clearboth" /> 
</div> 

任何幫助，意見或其他建議將不勝感激。謝謝。

http://jsfiddle.net/tinkering/WD7xY/

Answer 1

添加

#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{ 
    color:white; 
} 

DEMO：http://jsfiddle.net/EB97N/