javascript drop down menu question

Question

I'm trying to make a drop down menu using javascript/jquery but can't get my head round something.

When you mouseover a menu item it needs to display a div below it which contains another menu, in a similar fashion to lots of javascript menus.

The problem i am having is that when you mouseout of the menu item then the div needs to disappear, unless you have moved the mouse onto the div, in which case the div needs to stay there until you roll off it.

The trouble is that the mouseout event of the menu item fires before the mouseover event of the div.

I guess what I am trying to say is that the div would only disappear when you mouseout of the area which covers buth the menu and the div.

Does that make sense to anyone? (code below)

<ul id="menu">
 <li class="item1"><a href="#"></a></li>
 <li class="item2">
 <a href="#"></a>
 <div class="dropDownMenu">
 <div><a href="#">Sub-item 1</a></div>
 <div><a href="#">Sub-item 2</a></div>
 <div><a href="#">Sub-item 3</a></div>
 </div>
 </li>
 <li class="item3"><a href="#"></a></li>
</ul>
$('#menu LI > A').mouseover(function(){
 $(this).find('dropDownMenu').show();
});
$('#menu LI > A').mouseout(function(){
 $(this).find('dropDownMenu').hide();
 ^^^ Only do this if the user hasn't moved on to the drop down menu.
});

Answer 1

You can use mouseenter instead of mouseover.

• jonhobbs: That's magic. How have I never noticed that before? Shame it doesn't work with .live() but still great, thanks.

Answer 2

One solution may be starting a timeout when "#menu LI> A".mouseout fires (and clearTimeout when div.onmouseover fires); this way the menu would also be less difficult to use.