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/