Mi propio jQuery acordeón

Question

Hola chicos, he creado la siguiente estructura de menú:

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

Así que esa es mi estructura del menú. Ahora quiero usar jQuery reciente para que el / slideDown Efecto slideUp.

lo hago de esta manera:

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

Primero intenté pasar el ratón y mouseout, pero cuando he utilizado esa función, el paso del ratón trabajado y cuando me quería ir a la Subcomisión, el menú deslizado hacia arriba, pero mouseout occours de eventos. Ahora funcionó, pero cuando se ciernen por ejemplo, sobre el punto principal 3, el Subs también la de la casilla principal 4 se abren y cierran en mouseout?!?! Cómo decir sólo los elementos de menú de ejemplo Artículo principal 3 oder Artículo principal 4 ???

Espero que entiendan lo que quiero decir?

Gracias

Answer 1

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