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。

更新了您的Fiddle

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);

水平导航弹出悬停问题

1 个答案: