JQuery: Detect when mouse leaves multiple elements

Question

I have a menu made of divs, and one of the divs has a JQuery mouseenter function that slides down a dropdown:

$(".dropdownLauncher").mouseenter(function() {
  $(".dropdown").slideDown("slow");
});

I also have a function that slides the dropdown back up of the mouse leaves the dropdown:

$(".dropdown").mouseleave(function() {
  $(".dropdown").slideUp("slow");
});

This would be fine, except that when the user moves the mouse over the launcher, than out again, without going through the dropdown, the menu stays down.

Is it possible to check if the mouse is in either of the divs?

EDIT 1: Markup:

<div class="menu">
                <div class="menuItem selectedItem">Home</div>
                <div class="menuItem unselectedItem leftBorder dropdownLauncher">About <img src="Arrow.gif"></div>
                <div class="dropdown">
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                </div>
                <div class="menuItem unselectedItem leftBorder">Visiting</div>
                <div class="menuItem unselectedItem leftBorder">Newsletters</div>
                <div class="menuItem unselectedItem leftBorder">Ecology</div>
            </div>

Answer 1

Well, this way is quite buggy... open any menu (e.g. your browser menu), and move mouse - it is not hidden. This is normal way. When you click somewhere then menu is hidden (so you can attach click event handler to document). Even when you go to submenu, it is shown when mouse is over it, and is hidden when you move mouse to another menu item; but when you move mouse out of menu, submenu is not hidden.

If you still wanna implement your idea, you will need to implement complex system to control users actions. add mouseleave handler to dropdownLauncher, register that user left this item and trigger dropdown menu hiding. Now in function which hides dropdown menu check if mouse is over dropdown menu - cancel hiding; otherwise hide it. Do not forget to clean state of that variable ("left dropdownLauncher"). E.g. you can execute dropdown menu hiding in 1 second after user left Launcher.

Also be careful, when user moves mouse quite fast (just jerks), browser has no time to trigger some events (I had problems with mousemove)... Be sure that you test this case.

Well, no code attached, but I hope that you get the idea.

UPDATE: Probably you are not interested in this question anymore (answer comes so late, so I understand ;), but I've found very interesting solution, easy to support:

Click Examples Page

open that page, there is menu. As I got it, this is what you want to implement (I mean the same behavior of menu navigation). After looking at JavaScript code I noticed that it is very small, and even more, it is not related to that menu... So it was clear to me, they use pure HTML+CSS to perform it. Just take a look at small css file, and also take a look and menu html markup:

<div id="rootMenu" class="menustyle">
  <ul class="menubar">
      <li class="topitem">
        <a class="selected" href="_link_"><img border="0" src="/click-examples/assets/images/home.png" alt=" Home" class="link"> Home</a>
        <ul class="submenu">
           <li>
              <a title="BorderPage Java source" target="_blank" href="_link_">BorderPage Class</a>
           </li>
           <li>
              <a title="Page border HTML template" target="_blank" href="_link_">Border Template HTML</a>
            </li>
            ....
        </ul>
      </li>
      ....
   </ul>
   ....
</div>

everything else is done by css (specifically by :hover pseudo-class). I liked that approach. So now you have alternative, at least ;)