正確應用的位置：懸停以保持子菜單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; 
}