CSSサブメニューの背景にホバー

Question

私は自分のために小さなウェブサイトを作りたいので、私は初心者としてこの質問をします。メインメニューを表示するときに、サブメニューに別の背景が含まれていると成功できません。

HTML：

 <div id="nav"> 
      <ul class="sub1"> 
       <li><a href="#"><h2>Home</h2></a></li> 
       <li><a href="#"><h2>About</h2></a><!---id="onlink"---> 
       <ul class="sub2"> 
        <li><a href="#" title="About Us">Us</a></li> 
        <li><a href="#" title="About Our product">Our product</a></li> 
       </ul> 
       </li> 
      </ul> 
     </div> 

CSS：

#nav{ 
width:100%; 
height: 60px; 
padding-top: 20px; 
padding-bottom: 10px; 
} 

#nav ul{ 
margin:0; 
padding:0; 
width: 60%; 
margin: auto; 

} 

#nav ul li{ 
margin:0; 
padding:0; 
list-style: none; 
float:left; 
position:relative; 
background:transparent url(EN/Button_menu_unselected.png); 
} 

#nav ul li ul li{ 
background:aqua; /*Test that doesn't work*/ 
} 

#nav ul li a{ 
text-align:center; 
text-decoration:none; 
height:20px; 
width:100px; 
padding:10px; 
display:block; 
color:#003300; 
} 

#nav ul ul{ 
position:absolute; 
visibility:hidden; 
} 

#nav ul li:hover ul{ 
visibility:visible; 
} 

#nav ul li:hover a{ 
background-image: url(EN/Button_menu_rollover.png); 
} 

アイテムのドロップダウンは私に非常に悪い結果をもたらす "Button_menu_rollover" と呼ばれるボタンと同じ形式を取得します。

Answer 1

コード：

#nav ul li:hover a{ 
background-image: url(EN/Button_menu_rollover.png); 
} 

は、すべての要素およびサブ要素に適用されます。

これはそれを修正しますが、このコードは、IE6で動作しない：

#nav ul li:hover > a{ 
background: #fff; 
} 

それとも、正確な結果を得るためにHOVER効果のためにJavascriptを使用することができます。