jquery - 水平导航弹出悬停问题

Question

我有一个基本的导航菜单，可以在以下位置查看：http: //jsfiddle.net/UXuvL/

的HTML：

<nav>
    <ul>
        <li>ABOUT
            <ul class="sub-menu">
                <li>PEOPLE</li>
                <li>APPROACH</li>
            </ul>
        </li>
        <li>PROJECTS</li>
        <li>CONTACT</li>
    </ul>
</nav>​

CSS：

nav li { display: inline-block }
.sub-menu { display: inline-block; white-space: nowrap }​

jQuery：

(function($) {
    $('.sub-menu').hide();

    $('nav li').on('hover', function(){        
        $('nav .sub-menu').animate({width: 'toggle'});
    });
})(jQuery);​

从功能上讲，这就是我希望它的工作方式。您将鼠标悬停在“关于”上，“人物”/“方法”滑出右侧。

我现在最大的问题是，如果我将鼠标悬停在弹出的新链接之一上，菜单就会隐藏。我怎样才能阻止这种情况发生？

Answer 1

给你，伙计！您想使用 mouseenter 和 mouseleave。

更新了你的小提琴

html

<nav>
<ul>
    <li class='menu-header' >About
        <ul class="sub-menu">
            <li>People</li>
            <li>Approach</li>
        </ul>
    </li>

    <li class='menu-header' >Contact
        <ul class="sub-menu">
            <li>Email</li>
            <li>Phone</li>
        </ul>
    </li>

</ul>
</nav>

jQuery

(function($) {

    $('.sub-menu').hide();

    $('.menu-header').on({

        mouseenter: function() {
            $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
        },

        mouseleave: function(){
            $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
        }

     });


})(jQuery);