Где правильно применять: наведите курсор, чтобы сохранить подменю CSS в состоянии наведения

Question

Я пытаюсь сделать выпадающее меню. Некоторые люди помогли мне CSS только выпадающее меню post.

Все работает нормально, кроме случаев, когда я наводю указатель мыши на подменю. Фоновое изображение в режиме наведения в моем #menubar #test2 a:hover вернется в состояние #menubar #test2 a. Мне действительно нужно сделать это, и я был бы признателен, если бы кто-нибудь мог мне помочь. Спасибо миллион.

Мой HTML

<ul id="menuBar">
   <li id="test1">test1</li>
   <li id="test2"><a href="#">Pro1</a>
     <div class="subMenu">
        <ul>
           <li><a href="#">sub1</a></li>  
           <li><a href="#">sub2</a></li>
           <li><a href="#">sub3</a></li>
         </ul>
         <ul>
            <li><a href="#">Volleyball</a></li>
            <li><a href="#">Walking</a></li>
            <li><a href="#">Water Shoes</a></li>
         </ul>
       </div> <!--end of submenu-->
     </li>
  </ul>

CSS

#menuBar #test2 a{
background:url("../images/btTest.jpg") no-repeat bottom;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}

#menuBar #test2 a:hover{
background:url("../images/btTest.jpg") no-repeat top;
}  

#menuBar #test2 a:hover + .subMenu { //submenu show up
display:block;

} 

#menuBar li .subMenu:hover {  //keep submenu show up when hover in submenu
display: block; 
}

//the next one is not working....but I can't think of anything....
#menuBar li .subMenu:hover #menuBar #mens a {  
background:url("../images/btMen.jpg") no-repeat top;
}

Answer 1

Вам нужно это:

#menuBar #test2 a:hover{
   background:url("../images/btTest.jpg") no-repeat top;
} 

Быть таким:

#menuBar #test2:hover a {
  background:url("../images/btTest.jpg") no-repeat top;
}

Чтобы заставить его придерживаться при переходе на .subMenu. Это не будет работать для IE6 (если вы заботитесь).

Также эти:

#menuBar #test2 a:hover + .subMenu { //submenu show up
  display:block;
} 

#menuBar li .subMenu:hover {  //keep submenu show up when hover in submenu
  display: block; 
}

Должен быть в состоянии заменить только этим:

#menuBar li:hover .subMenu {
  display: block;
}