title: Building hover navigation systems using dependant hovers?
body: <p>Hey there stack overflow crew,</p>
  
  <p>Quick question that always seems to come up when building custom drop down navigation systems using jquery. Now the ideal scenario for drop down menus would be to have the parent and children in <li> tags however sometimes the design of the site does not allow this.</p>
  
  <p>Let's say you have a DIV containing your primary navigation items and another  below containing your child menus.</p>
  
  <p>When you rollover the parent the child menu appears however when these are seperate 's the rollout state get's tricky. So I nested the hovers to try and get around this and it alllmost works.</p>
  
  <pre><code>$("div.primary-nav").mouseenter(function () {
  
      clearTimeout($(this).data('timeoutId'));
      $("div.doormat-nav-wrapper").slideDown("slow");
  
  }).mouseleave(function () {
  
      $("div.doormat-nav-wrapper").mouseenter(function () {
          clearTimeout($(this).data('timeoutId'));
          $("div.doormat-nav-wrapper").slideDown("slow");
      }).mouseleave(function () {
          var someelement = this;
          var timeoutId = setTimeout(function(){ 
          $("div.doormat-nav-wrapper").slideUp("slow");
          $(someelement).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
          });
      });     
  
  });
  </code></pre>
  
  <p>Logically what I'm trying to achieve is </p>
  
  <p>When the user rolls over the div.primary-nav .... div.doormat-nav-wrapper shows... when rolling off the primary nav div.doormat-nav-wrapper hides UNLESS div.doormat-nav-wrapper itself is being hovered on.</p>
  
  <p>Any feedback or suggestions would be greatly appreciated. THANKS!</p>