[jQuery] Hiding and Showing behavior, where to mouseout?

[marc0047]

I'm having a little trouble with getting a rollout behavior to work
properly: I would like to have a button trigger a menu to open up. The
menu will close back up when the user rolls out of the menu space.

So far I have been able to get the menu to open correctly open a menu
trigger. However, whenever the user rolls into the drop out menu, it
closes back up again.

Here's a working example:

http://project.meyouand.us/webdev/jquery/drop-menus3.html

The jquery I'm using:

$(".menus h1").mouseover(function() {
                $(this).siblings().show("slow");
});

$(".menus ul").mouseout(function() {
                $(this).hide("slow");
});


I think my techinque/approach for the mouseout is not working as
planned. Does anyone have a better method?

Thanks!