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/