Fond de sous-menu CSS sur hover

Question

Je veux faire un petit site pour moi et je pose cette question en tant que débutant. Je n'arrive pas à faire en sorte que le sous-menu contienne un autre arrière-plan lorsque je survole le menu principal.

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

La liste déroulante articles obtenir le même format que le bouton appelé "Button_menu_rollover", ce qui me donne un très mauvais résultat.

Answer 1

Le code:

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

est appliqué à tous les éléments et sous-éléments.

Ce problème est résolu, mais ce code ne fonctionne pas sur IE6:

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

Ou vous pouvez utiliser Javascript pour effet FLOTTANT pour obtenir des résultats exacts.