Подменю 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; 
} 

Или вы можете использовать Javascript для Hover эффекта, чтобы получить точные результаты.