Jquery – 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="Contact" 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!

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.