我正在尝试制作下拉菜单。有些人帮助我 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;
}
最佳答案
你需要这个:
#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;
}
关于html - 在哪里正确应用 :hover to keep submenu css in the hover state,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3314564/