title: dropdown delay timeout jquery on hover
body: <p><a href="http://jsfiddle.net/natvk/" rel="nofollow">http://jsfiddle.net/natvk/</a></p>
  
  <p>I've built this dropdown menu, hover on the third box and wait for dropdown to show up then hover on cars and wait for second dropdown to show up. Now prob is if I hover out of it although there's delay and i have time to go back on menu, it still goes through with invoking toggle again. the menu doesnt remain open. how can I keep it open in case user hovers out and back in again on the menu?</p>
  
  <p>Apart from the code on js fiddle, a user on here suggested this code, but with it the menu isn't invoking in the first place so nothing is seen, the suggested code is here: </p>
  
  <pre><code>var menu_animation_timeout = null;
  
  $('.ddown').hover(function(){
      clearTimeout(menu_animation_timeout);
      menu_animation_timeout = setTimeout(function(){
      $( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
      }, 500) 
  
      }, function() {
      clearTimeout(menu_animation_timeout);   
      menu_animation_timeout = setTimeout(function(){
      $( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
      }, 1000)
  });
  </code></pre>
  
  <p>thanks,</p>
  
  <p>Ian</p>