JQuery - keep a div in animated state whilst hovering over a different div?

I am trying stuff that's out of my dep开发者_运维知识库th as usual! I'm trying to make a navigation for my new website, it's supposed to slide down when the user hovers over another div. That other div will have a graphic of some sort saying "menu". I need to nav to stay open when hovering over the "other" div or the menu div itself. So far I have it working but on a div the menu is inside, which is not really the right thing.

Is there some way to bind these two divs together or something like that? Wish I was better at JQuery!

My site is here if you would like to take a peek. The white div represents the div the user would hover over to open the menu.

Any help is welcome, thanks :D

Here is a working fiddle: http://jsfiddle.net/maniator/dpBBp/

here is the updated js:

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

See html in the fiddle.

Container all of the elements within a div and target that div. Something like this:

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

On a side note on your site you should use sprites as background images and switch the background position on hover, it will get rid of the jump when you roll over the elements.