title: JQuery - dropdown menu - mouseenter/mouseleave
body: <p>I've spent at least 2 hours trying to make this work.. </p>
  
  <p>Basically I have a dropdown menu with items and I've tried to write something that imitates HoverIntent plugin where the user is allowed to move his mouse outside the item for a fixed number of seconds before the menu closes.</p>
  
  <p>What I wrote is partially working except that if you try to move your mouse between the menus too fast, it will "break". If you do it slowly, everything will work as expected</p>
  
  <p>See it for yourself:</p>
  
  <p><a href="http://jsfiddle.net/DkJg8/1/" rel="nofollow">http://jsfiddle.net/DkJg8/1/</a></p>
  
  <pre><code>var old_item;
  
  $(".nav_menu &gt; li").mouseenter(function(){
  
          var item_selected = $("ul", this);
          // if this current item is already in process of being hidden
          var timeout = item_selected.data("timeout_hide");
          if(timeout){
              clearTimeout(timeout);
              item_selected.removeData("timeout_hide");
  
          } else {
  
              if(old_item){
                  old_item.hide();
              }
  
              item_selected.show();
          }
  });
  
  $(".nav_menu &gt; li").mouseleave(function(){
          var item_selected = $("ul", this);
  
          old_item = item_selected;
  
          item_selected.data("timeout_hide", setTimeout(function(){
                  item_selected.removeData("timeout_hide");
                  item_selected.hide();
          }, 500));
  });
  </code></pre>
  
  <p>how can I fix it??</p>