javascript - Jquery 下拉导航

Question

我有这样的导航:

<ul>
<li><a href="#">Navi 1</a>
<ul class="navisub" style="display:none">
 <li>Subnavi 1</li>
 <li>Subnavi 2</li>
</ul>
</li>
<li><a href="#">Navi 2</a>
<ul class="navisub" style="display:none">
 <li>Subnavi 3</li>
 <li>Subnavi 2</li>
</ul>
</li>
</ul>

主要问题是，当我将鼠标悬停在“Navi 1”li 上时，应该会显示子导航。但是当我用光标进入子导航时，一切都隐藏了。

那是我的代码:

$('#navi li').mouseenter(
    function () {
        //show its submenu
        $('ul.navisub', this).css('display','block');

    }).mouseleave( 
    function () {
        //hide its submenu
        $('ul.navisub', this).css('display','none');         
    }
);

有什么建议吗？ 非常感谢大家!

Answer 1

我前段时间遇到了同样的问题，我使用hover(也使用显示/隐藏)解决了它:

$('#navi li').hover(
    function () {
        //show its submenu
        $('ul.navisub', this).show();
    },
    function () {
        //hide its submenu
        $('ul.navisub', this).hide();         
    }
);