在哪里正确应用:hover可使子菜单css处于悬停状态 [英] Where to properly apply :hover to keep submenu css in the hover state
本文介绍了在哪里正确应用:hover可使子菜单css处于悬停状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试制作下拉菜单.有些人帮助我仅CSS下拉菜单文章.
I am trying to make drop down menu. Some folks helped me on CSS only drop down menu post.
一切正常,除非我将鼠标悬停在子菜单上.我的 #menubar#test2 a:hover
中的悬停状态背景图片将返回到 #menubar#test2 a
状态.我真的需要完成这项工作,如果有人可以帮助我,我将不胜感激.谢谢你一百万.
Everything works fine except when I hover my mouse to my submenu. The hover state background image in my #menubar #test2 a:hover
will return to #menubar #test2 a
state. I really need to get this done and would appreciate if anyone could help me about it. Thanks a million.
我的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.
To get it to stick when you move to the .subMenu
. This will not work for IE6 (if you care).
还有这些:
#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;
}
这篇关于在哪里正确应用:hover可使子菜单css处于悬停状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文