jQuery下拉导航

Question

I got this kind of Navigation:

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

Mainproblem is, when I hover the "Navi 1" li, the subnavi should show. But when i enter the subnavi with my cursor everything is hiding.

thats my code:

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

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

Any suggestions? Thank you all very much!

Answer 1

I had the same problem some time ago and I solved it using hover (also use show/hide):

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

Answer 2

You can add a bit of animation too. Using the toggleFade

$('#navi li').hover(function() {
$(this).find('ul.navisub').stop(true, true).fadeToggle(600); 
});

Notice the .stop method, this will stop the animation from queuing, from hovering on/off faster than the animation time. You can change the (600) to whatever you'd like at the moment it's set to 0.6 seconds as its in milliseconds.

Checkout the jsFiddle

Answer 3

Depending on your target browser requirements it is possible to do this without JavaScript. See a pure CSS demo here .

If you need something the works in IE6 then jQuery is a good solution. I can expand on this with a jQuery version if needed :)

Edit: jQuery version here .

Second Edit: New version which might do what you want.

Answer 4

Given this, I presume you meant for your <ul> to have an id of "navi"?

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



$('#navi li').mouseenter(
    function () {...