title: Mouseover is acting weird
body: <p>I'm trying to make a submenu appears only when the mouse is over the parent <code>&lt;li&gt;</code> element using jQuery.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="item"&gt;Item 1
         &lt;ul class="sub"&gt;
             &lt;li&gt;Sub 1&lt;/li&gt;
             &lt;li&gt;Sub 2&lt;/li&gt;
         &lt;/ul&gt;
    &lt;/li&gt;
      &lt;li class="item"&gt;Item 1
         &lt;ul class="sub"&gt;
            &lt;li&gt;Sub 1&lt;/li&gt;
            &lt;li&gt;Sub 2&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul li ul{
    height: auto;
    display: none;
  }
  </code></pre>
  
  <p>The jquery:</p>
  
  <pre><code>$(".item").mouseover(function() {
      var originalHeight = $(this).find(".sub").height();
      $(this).find(".sub").css('height', '0');
      $(this).find(".sub").css('display', 'block');
      $(this).find(".sub").animate({
          height: originalHeight
      }, 1000, function() {});
  });
  
  $(".item").mouseout(function() {
      $(this).find(".sub").animate({
          height: '0'
      }, 1000, function() {});
      setTimeout(function() {
          $(this).find(".sub").css('display', 'none');
          $(this).find(".sub").css('height', originalHeight);
      }, 1000);
  });
  </code></pre>
  
  <p>Here's the fiddle: <a href="https://jsfiddle.net/gtq9q5gL/" rel="nofollow noreferrer">https://jsfiddle.net/gtq9q5gL/</a></p>
  
  <p>Problem is: the whole thing is acting weird, and i don't know why. Sometimes the submenu appears again even when the mouse is out. </p>