html - unordered list change color same level only

Question

Good day
i have this 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

im using :

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

The baground is now red for each li in .nav-1 and for all li in .nav-2
what i want is to stop the effect of red background ==> only .nav-1 should be red
not li and sub menu
any help or link ?
Thank u for any help

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 内にさらに 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;
}