在下拉菜單上將鼠標懸停在文本上

Question

問題是，當您離開<a>時，字體顏色將恢復爲其非懸停顏色。

即使光標離開「關於」鏈接，我也希望「關於」文本的顏色爲白色。

我一直試圖把所有的color:放在我的懸停鏈接上的文本，但沒有喜悅。

這裏是我的fiddle

HTML

<nav> 
    <ul> 
     <li class="n1"> 
      <a href="#">Home</a> 
     </li> 
     <li class="n2"> 
      <a href="#">About</a> 
      <ul class="menu"> 
       <li> 
        <a href="#">List 1</a> 
       </li> 
       <li> 
        <a href="#">List 2</a> 
       </li> 
       <li> 
        <a href="#">List 3</a> 
       </li> 
      </ul> 
     </li> 
     <li class="n3"> 
      <a href="#">Contact</a> 
     </li>   
    </ul> 
</nav>​ 

CSS

nav { 
    width 100%; 
} 

nav ul { 
    list-type: none; 
} 

nav ul li { 
    maring: 0; 
    padding: 0; 
} 

nav ul li a { 
    display: block; 
    float: left; 
    padding: 10px 20px; 
    line-height: 1; 
    color: dodgerblue; 
    background: silver; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

nav ul li a:hover { 
    color: white; 
} 

nav ul li.n2:hover > .menu { 
    display: block; 
} 

.menu { 
    position: absolute; 
    top: 36px; 
    left: 86px; 
    background: silver; 
    width: 93px; 
    display: none; 
} 

.menu li a { 
    color: white; 
} 

.menu li a:hover { 
    color: dimgray; 
} 
​ 

Answer 1

您需要懸停添加到李

nav ul li:hover a { 
    color:white; 
}