0
我做了一个鼠标悬停子菜单,一切工作正常。 但是,只要我将鼠标光标移到父节点上,子菜单就消失...jquery mouseover子菜单
即使我从父级移出光标,如何保持子菜单出现?
这是我的代码
$(document).ready(function() {
$(".findStore").findMenu();
});
$.fn.findMenu = function() {
var el = $(this);
/* for IE 6 */
$("li", el).mouseover(function() {
$(this).addClass("hover");
}).mouseout(function() {
$(this).removeClass("hover");
});
/* keyboard accessible */
$("a", el).focus(function() {
$(this).parents("li").addClass("hover");
}).blur(function() {
$(this).parents("li").removeClass("hover");
});
}
.findStore {
width:280px;
height:500px;
background:#f3f3f3
}
.findStore ul li {
float: left;
position: relative;
text-align:center;
}
.findStore ul li:hover, .findStore ul li.hover a {
}
.findStore ul li a {
position:relative;
display: block;
width:40px;
height:20px;
}
.findStore ul li a:hover, .findStore ul li a:focus, .findStore ul li a:active, .findStore ul li.hover {
z-index: 100;
text-decoration:none;
color:#fff;
background:#478414;
}
.findStore ul ul {
position: absolute;
top:20px;
left: -9999em;
}
.findStore ul ul li {
float: left;
position: static;
}
.findStore ul ul li a {
display: block;
width:72px;
height:20px;
}
.findStore ul li:hover ul, .findStore ul li.hover ul {
left:0;
}
<div class="findStore">
<ul>
<li> <a href="#"><span>menu1</span></a>
<ul>
<li><a href="javascript:openStrNoPop(100000);">sub1</a>
</li>
<li><a href="javascript:openStrNoPop(112233);">sub1</a>
</li>
<li>
</ul>
</li>
<li> <a href="#" class=""><span>menu2</span></a>
<ul>
<li><a href="#">sub2</a>
</li>
</ul>
</li>
<li> <a href="#" class=""><span>menu3</span></a>
<ul>
<li><a href="#">sub3</a>
</li>
</ul>
</li>
</ul>
</div>
小提琴...... !! –
http://jsfiddle.net/ewG9t/ – user1833620
检查答案 –