html - 无序列表只改变颜色相同级别

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，baground 现在 都是
红色的帮助或链接？ 谢谢你的帮助

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