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 的背景都是红色
我想要的是停止红色背景的效果 ==> 只有 .nav-1 应该是红色的
不是 li 和子菜单
任何帮助或链接？
谢谢你的帮助

Answer 1

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

将你的 CSS 写成 -

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

Demo