JQuery - держать div в анимированном состоянии, пока зависаете над другим div?

Question

Я стараюсь изо всех сил, как обычно!Я пытаюсь создать навигацию для моего нового веб-сайта, он должен скользить вниз, когда пользователь наводит курсор на другой div.Этот другой div будет иметь какую-то графику с надписью «menu».Мне нужно, чтобы навигация оставалась открытой при наведении курсора на «другой» div или на сам div меню.Пока у меня это работает, но на div меню внутри, что не совсем правильно.

Есть ли какой-нибудь способ связать эти два div вместе или что-то в этом роде?Жаль, что я был лучше в JQuery!

Мой сайт здесь, если вы хотите взглянуть .Белый div представляет собой div, на который пользователь наведет курсор, чтобы открыть меню.

Любая помощь приветствуется, спасибо: D

Answer 1

Вот рабочая скрипка: http://jsfiddle.net/maniator/dpBBp/

вот обновленный js:

$('.menu_button').hover(function() {
    $('#nav').slideDown();
}, function() {
    $('#nav').slideUp();
})

См. Html в скрипке.

Answer 2

Содержит все элементы внутри div и предназначается для этого div.Примерно так:

<ul>
    <li>
        <a href='#'>Nav Item</a>
        <div style='display:none;'>
            <ul>
                <li>Sub nav 1</li>
            </ul>
        </div>

    </li>

</ul>

<script>
$("ul > li").hover(function(){
    //on roll over
}, function(){
    //on roll out
});
</script>

На боковой заметке на вашем сайте вы должны использовать спрайты в качестве фоновых изображений и переключать положение фона при наведении курсора, это избавит от скачка при наведении на элементы.