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

Answer 1

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

将您的CSS写为 -

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

Demo

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

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

3 个答案: