Мой собственный аккордеон jQuery

Question

Привет, ребята, я создал следующую структуру меню:

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

Вот моя структура меню.Теперь я хочу использовать jQuery Latest для создания эффекта SlideUp/SlideDown.

Я делаю так:

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

Сначала я попробовал наведение курсора мыши и наведение курсора мыши, но когда я использовал эту функцию, наведение курсора мыши сработало, и когда я хотел перейти к подменю, меню сдвинулось вверх, но произошло событие mouseout.Теперь это сработало, но когда я навожу курсор, например.в Основном элементе 3 подмены также из Основного элемента 4 открываются и закрываются при наведении курсора мыши?!?!Как сказать только пункты меню, например.Главный предмет 3 или Основной предмет 4???

Надеюсь, вы понимаете, что я имею в виду?

Спасибо

Answer 1

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