jQuery下拉菜单问题

Question

我想做什么

我有一个下拉菜单，仅当用户将鼠标悬停在链接上时才显示，然后在鼠标离开菜单和链接时消失。

我正在努力的

我可以使菜单可见，但是一旦鼠标尝试访问一个li ，它就会消失。

码

请在http://jsfiddle.net/u2Ym6/上查看jsFiddle 。

以下是一般情况：

HTML

<div style="position: relative;">
    <a href="#" class="bold" id="userName">Welcome back, User</a>
    <ul id="userMenu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS

ul#userMenu {
    position:absolute;
    padding:10px;
    top:100%; left: 0;
    z-index:10;
    display:none;
}

ul#userMenu li {
    list-style:none;
    float:left;
    margin: 0 auto;
    width:100%;
}

jQuery的

$(document).ready(function(){
    $('a#userName').bind('mouseover',openUserMenu);
    $('ul#userMenu').bind('mouseout',closeUserMenu);
});

function openUserMenu(){
    $('ul#userMenu').fadeIn(100);
}

function closeUserMenu(){
    $('ul#userMenu').fadeOut(250);
}

Answer 1

尝试mouseleave。 工作正常...

 $(document).ready(function(){
   $("a#userName").on("mouseover",function(){
      openUserMenu();
   });
   $("ul#userMenu").on("mouseleave", function(){
      closeUserMenu();
   });
});

和小提琴是...。 http : //jsfiddle.net/Vz6Ms/

Answer 2

我认为您已将鼠标绑定到错误的元素。

$(document).ready(function(){
    $('a#userName').bind('mouseover',openUserMenu);
    $('a#userName').bind('mouseout',closeUserMenu);
});

请参阅小提琴： http : //jsfiddle.net/6jtzV/1/