Question

Hey Guys, i have created the following Menu Structure:

<div id="menu">
<ul>
<li><a href="#">Main Item1</a></li>
<li><a href="#">Main Item2</a></li>
<li><a href="#">Main Item3</a>
    <ul>
    <li><a href="#">SubItem for MainItem3</a></li>
    <li><a href="#">2ndSub for MainItem3</a></li>
    </ul>
</li>
<li><a href="#">Main Item4</a>
    <ul>
    <li><a href="#">SubItem for MainItem4</a></li>
    <li><a href="#">2ndSub for MainItem4</a></li>
    </ul>
</li>
</ul>
</div>

So that’s my Menu Structure. Now i want to use jQuery Latest to make the SlideUp/SlideDown Effect.

I do this way:

$(document).ready(function(){
    $('#menu ul li:has(ul)').mouseenter(function(){         
                $('#menu ul li ul').slideDown('slow');                              
    }).mouseleave(function(){
        $('#menu ul li ul').slideUp('slow');
    });
});

I first tried mouseover and mouseout, but when i used that Function, the Mouseover worked and when i wanted to go to the Sub, the Menu Slided up, but mouseout Event occours. Now it worked, but when i hover e.g. on Main Item 3, the Subs also from Main Item 4 open and close on mouseout?!?! How to say only the Menu Items from e.g. Main Item 3 oder Main Item 4???

Hope you understand what i mean?

Thanks

Answer 1

$(function(){
    $('#menu ul li:has(ul)').hover(function(){                 
            $(this).find('ul').slideDown('slow');                                                          
    }, function(){
            $(this).find('ul').slideUp('slow');
    });
});