正确应用的位置：悬停以保持子菜单css处于悬停状态

Question

我正在尝试使下拉菜单。有些人帮我在 CSS only drop down menu后。

除了当我将鼠标悬停在我的子菜单上时，一切正常。我的#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; 
}