CSS Submenu background on hover - css

Question

I want to make a small website for myself and so I ask this question as a beginner. I cannot succeed to have the submenu contain another background when hovering the main menu.
HTML:
<div id="nav">
<ul class="sub1">
<li><h2>Home</h2></li>
<li><h2>About</h2><!---id="onlink"--->
<ul class="sub2">
<li>Us</li>
<li>Our product</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);
}
The drop down items get the same format as the button called "Button_menu_rollover", which gives me a very bad result.

Answer 1

The code:
#nav ul li:hover a{
background-image: url(EN/Button_menu_rollover.png);
}
is applied to all elements and sub-elements.
This fixes it, but this code does not work on IE6:
#nav ul li:hover > a{
background: #fff;
}
Or you may use Javascript for HOVER effect to get exact results.