title: How to set delay on mouseover for this menu?
body: <p>I have drop down menu, and I want to add delay on mouseout. So when you hover over the menu, it ll display drop down, but when you move mouse from the menu, I want to there be some delay.</p>
  
  <p>I have searched all day for this, and didnt found anything, expect hoverIntent plugin which i dont know to use.</p>
  
  <p>Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id='nav'&gt;
    &lt;li&gt;&lt;a href='#'&gt;Top level 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href='#'&gt;Top level 2&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;
          &lt;a href='#'&gt;Sub 2 - 2&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href='#'&gt;Sub 2 - 2 - 1&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 2 - 1 - 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 2 - 1 - 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 2 - 1 - 3&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 2 - 1 - 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 2 - 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;
              &lt;a href='#'&gt;Sub 2 - 2 - 3&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 2 - 3 - 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 2 - 3 - 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 2 - 3 - 3&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 2 - 3 - 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href='#'&gt;Sub 2 - 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>$(document).ready(function(){                   
      $("#nav ul ").css({display: "none"}); 
      $("#nav li").hover(
          function()
              {
                  $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();
              },
          function(){
            $(this).find('ul:first').css({visibility: "hidden"});
          }
  );
  </code></pre>
  
  <p>Please assume, that I'm big noob for javascript :)</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have tried all the solutions, and none worked expect the solution from Patricia. Now i get strange behavior as you can see at <a href="http://pastehtml.com/view/aykmhy9ae.html" rel="nofollow">http://pastehtml.com/view/aykmhy9ae.html</a></p>