无序列表仅更改颜色相同级别

Question

日安

我有这个html

<ul id="nav" class="nav-1"> 
<li><a href="#">Loans</a></li> 
<li><a href="#">Bancassurance</a> 
  <ul class="nav-2"> 
    <li><a href="#">darb</a></li> 
    <li><a href="#">elem</a></li> 
    <li><a href="#">ghad</a></li> 
  </ul> 
</li> 
</ul

即时通信工具使用：

.nav-1 li:hover a {
background:#FF0000; 
}

现在，.nav-1中的每个li和.nav-2中的所有li都是红色的

我想要的是停止红色背景==>的效果。.nav 1应该是红色的

not li and sub菜单

有什么帮助或链接吗？

感谢您的帮助

Answer 1

这就是你的解决方案-- http://jsfiddle.net/sEYba/2/

把你的CSS写成-

.nav-1 li a:hover {
  background:#FF0000;
}
.nav-2 li a:hover {
  background: none;
}

Answer 2

这应该是你的答案。这将使它成为通用的，如果您在第一个中添加更多的ul，您将不必编写额外的代码。

.nav-1 li:hover a {
background:#FF0000; 
}

.nav-1 li:hover ul li a {
background:none; 
}

Answer 3

使用以下代码：

.nav-1 li a:hover{
    background:#FF0000;
}
.nav-1 li li a:hover{
    background:none;
}