title: Dropdown menu overflow issue: Mouseenter and Mouseleave + slideDown and slideUp
body: <p>I have this simple dropdown menu with sub menus.
  Problem is that when I hover the menu item to show its submenu(with slideDown), it only shows part of the menu while the animation/effect is running(overflow issue) - When the animation is complete, only then the whole menu is displayed</p>
  
  <p>See my <a href="http://jsfiddle.net/GM9Lm/45/" rel="nofollow">fiddle</a> to see what I mean:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul id="main"&gt;
      &lt;li&gt;&lt;a&gt;Item1&lt;/a&gt;
          &lt;ul class="sub"&gt;
              &lt;li&gt;subItem1&lt;/li&gt;
              &lt;li&gt;subItem2&lt;/li&gt;
              &lt;li&gt;subItem3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Item2&lt;/a&gt;
          &lt;ul class="sub"&gt;
              &lt;li&gt;subItem4&lt;/li&gt;
              &lt;li&gt;subItem5&lt;/li&gt;
              &lt;li&gt;subItem6&lt;/li&gt;
          &lt;/ul&gt;    
      &lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Item3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Item4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>ul{
      list-style: none;
      position: relative;
      z-index: 99;
  }
  ul#main li{
      float: left;
      position: relative;
      width: 50px;
      overflow: visible;
  }
  ul#main li a{
      display: block;
      padding: 0px 10px 10px 10px;
  }
  ul.sub{
      position: relative; 
      top: 100%; 
      right: 30%;
      display: none;
      z-index: 999;
  }
  
  ul.sub li{
      float: none;    
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('ul#main li').mouseenter(function(){
      $(this).children('ul.sub').slideDown(300);
  });
  $('ul#main li').mouseleave(function(){
      $(this).children('ul.sub').slideUp(300);
  });
  </code></pre>