Problem with Mouseover, mouseout in JQuery menu

I am trying to emulate the menu's in http://www.clydeproperty.com/ I want to hover over one of the menu's and make a jQuery.load() call to get the menu options, then slideDown() a div containing the options.

I would then like to keep the menu open until you move anywhere else on the page, except into the open menu: in the below example, this would be the menuOptions div.

<div class="menu"><a id="Products" href="#">Products</a></div>
<div class="menu"><a id="Services" href="#">Services</a></div>
<div class="menu"><a id="C开发者_Python百科ontact" href="#">Contact Us</a></div>
<div id="menuOptions"></div>

I am currently using the following jQuery to show the menu:

$('.menu').mouseover(function(){
    $('#menuOptions').load('./MenuOptions.html #' + $(this).children('a').attr('id'), function(){
        $('#menuOptions').stop().slideDown(1200);
    });
});

I have tried using a $('.menu').mouseout event but this would of course fire whenever you go into the menu! This is driving me crazy so any help is much appreciated.

One way I've thought of doing is add an almost negative selector to add a mouseover event to everything EXCEPT .menu and #menuOptions but i know that's far from the best solution!

Why wouldn't you attach the mouseout event to the #menuOptions tag, since that's the one you want to leave open until you move elsewhere on the page?

To make sure you don't have more than one menu open at a time, attach a trigger() event to the other top-level menu items (i.e. Products, Services, etc) so that any #menuOptions div tags that are open are closed before your desired one is opened. This trigger would fire the mouseout event for each #menuOptions div.

I would put an individual .menuOptions div inside each .menu div (position them absolute). That way you can load each specific one and use the mouseout event to close itself. You will need to give it a class instead of an id as there will be several of them.

Then use jQuery to find the div within the .menu class, like:

$('.menu').find('.menuOptions')

Hope that helps.