以下显示菜单：
<a href="#" id="cityclick">ONZE WAARDEN</a>
<div id="citydrop">
<div class="dropbottom">
<div class="dropmid">
<ul>
<li><a href="#">FAQ</a>
</li>
<li><a href="#">ITC</a>
</li>
<li><a href="#">CLUB</a>
</li>
<li><a href="#">CULTUUR</a>
</li>
<li><a href="#">ROBITICA</a>
</li>
</ul>
</div>
</div>
</div>
jQuery for如下：
$("#citydrop").hide();
$("#cityclick").mouSEOver(function () {
$("#citydrop").slideDown('slow');
});
$("#citydrop").mouseleave(function () {
$("#citydrop").slideUp('slow');
});
问题：
当鼠标离开“cityclick”但尚未输入“citydrop”时,我无法弄清楚如何切换子菜单“citydrop”.
我在这里尝试了jsfiddle
解决方法
在你的html上使用一些包装器,然后在其上调用mouseleave事件,如：
http://jsfiddle.net/9yEHV/11/
$("#wrapper").mouseleave(function () {
$("#citydrop").slideUp('slow');
});
包装：
<div id="wrapper">
<a href="#" id="cityclick" >ONZE WAARDEN</a>
<!-- rest of your code -->
</div>
