在下拉菜单上将鼠标悬停在文本上

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; 
}