我的demo在这
用css伪类做的https://jsfiddle.net/mcguvgy4/,
用jquery做的https://jsfiddle.net/mcguvgy4/1/.
不知为何都遇到这种情况,无法选中下拉框的内容?
html这样改
<li>
<a href="#" class="show">AAA
<ul class="ul2">
<li>BBBBBB</li>
<li>BBBBBB</li>
<li>BBBBBB</li>
<li>BBBBBB</li>
</ul>
</a>
</li>
css
.show:hover>.ul2{...}
你触发的hover是<a href="#" class="show" >AAA</a>
的,显然当鼠标离开a标签的时候li列表就会隐藏掉了。你将class="show"放到a的父元素li上试一下。
用 :hover 做是可以了,但是你用错层级关系了,应该用 li 来控制,而不是 a ,a 和 子菜单 ul 都是 li 的子元素,所有滑到 a 和 ul 上都算 :hover ,而你用 a 来控制,滑到 ul 上,a 就不是 :hover 了
.ul1>li:hover .ul2{
display:block;
}
这里检测的是li
<a href="#" class="show">AAA</a>
$(function(){
$(".show").hover(function(){
$(".ul2").show();
},function(){
$(".ul2").hide();
});
});
这里检测的是a