title: jQuery tooltip menu does not hide properly
body: <p>I'm trying to do a homegrown jQuery tooltip menu, as I don't really need all of the functionality (and overhead) of a plugin.</p>
  
  <p>My site features a typical top menu with some items that need dropdown/tooltip submenus.  Markup is as follows:</p>
  
  <pre><code>&lt;ul class="topmenu"&gt;
  &lt;li class="topmenu" id="flink"&gt;
  &lt;a href="pagewithsubmenu.php" class="topmenu"&gt;Link Text For Submenu 1&lt;/a&gt;
  &lt;div id="fmenu" style="display: none;" class="submenu"&gt;
  &lt;a href="submenu_link_1.php"&gt;Submenu Link 1&lt;/a&gt;&lt;br&gt;
  &lt;a href="submenu_link_2.php"&gt;Submenu Link 2&lt;/a&gt;&lt;br&gt;
  &lt;a href="submenu_link_3.php"&gt;Submenu Link 3&lt;/a&gt;&lt;br&gt;
  &lt;a href="submenu_link_4.php"&gt;Submenu Link 4&lt;/a&gt;&lt;br&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li class="topmenu"&gt;&lt;a href="about.php" class="topmenu"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li class="topmenu"&gt;&lt;a href="contact.php" class="topmenu"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;li class="topmenu" id="ulink"&gt;
  &lt;a href="pagewithsubmenudeaux.php" class="topmenu"&gt;Link Text For Submenu 2&lt;/a&gt;
  &lt;div id="umenu" style="display: none;" class="submenu"&gt;
  &lt;a href="submenu_link_1a.php"&gt;Submenu Link 1a&lt;/a&gt;&lt;br&gt;
  &lt;a href="submenu_link_2a.php"&gt;Submenu Link 2a&lt;/a&gt;&lt;br&gt;
  &lt;a href="submenu_link_3a.php"&gt;Submenu Link 3a&lt;/a&gt;&lt;br&gt;
  &lt;a href="submenu_link_4a.php"&gt;Submenu Link 4a&lt;/a&gt;&lt;br&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here is the jQuery I'm using:</p>
  
  <pre><code>$("#ulink").hover(function(){
      $('#fmenu').slideUp(300);
      $('#umenu').slideDown(300);
      }, function(){
          var link = $(this);
          window.setTimeout(function(){
              //  $('#umenu').slideUp(300);
          }, 800);
      });
  
  $("#umenu").hover(function(){
      $('#fmenu').slideUp(300);
      $('#umenu').slideDown(300);
      }, function(){
          var link = $(this);
          window.setTimeout(function(){
                  $('#umenu').slideUp(300);
          }, 800);
      });
  
  $("#flink").hover(function(){
      $('#umenu').slideUp(300);
      $('#fmenu').slideDown(300);
      }, function(){
          var link = $(this);
          window.setTimeout(function(){
              //  $('#fmenu').slideUp(300);
          }, 800);
      });
  
  $("#fmenu").hover(function(){
      $('#umenu').slideUp(300);
      $('#fmenu').slideDown(300);
      }, function(){
          var link = $(this);
          window.setTimeout(function(){
                  $('#fmenu').slideUp(300);
          }, 800);
      });
  </code></pre>
  
  <p>This <em>almost</em> gives me what I need.  If I mouse over either of the main links, the correct submenu slides open - and if the other submenu is currently open, it slides closed.  So far, so good.</p>
  
  <p>If I roll the mouse down to a submenu, it stays open for as long as the mouse is over any portion of it.  Once the mouse moves out of the submenu, it slides closed after a short delay.  Perfect.</p>
  
  <p>However, if I simply move the mouse off of a main link WITHOUT either mousing over the other main link <em>or</em> the created submenu (say, I move the mouse to the side, then around the submenu), then the subenu will stay open until the end of time (or the browser window is refreshed, whichever comes first).  </p>
  
  <p>You note that I have commented out the slideUp() portion related to the parent link LI elements, as they would slide my submenu up once the mouse left the parent link, even if I had moused over the appropriate submenu.  This behavior obviously made the menus unusable, whereas now they are simply slightly annoying.</p>
  
  <p>What stupid obvious solution am I missing?</p>
  
  <p>Thanks for your help.</p>