title: jQuery - CSS dropdown multilevel menu animation
body: <p>I have standard multi-level menu like this one:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown&lt;/a&gt;
         &lt;ul class="sub-menu"&gt;
             &lt;li&gt;&lt;a href="#"&gt;Link #1&lt;/a&gt;&lt;/li&gt; 
             &lt;li&gt;&lt;a href="#"&gt;Link #2&lt;/a&gt;&lt;/li&gt;  
             &lt;li&gt;&lt;a href="#"&gt;Link #3&lt;/a&gt;&lt;/li&gt;            
         &lt;/ul&gt;
      &lt;/li&gt;    
  &lt;/ul&gt;
  </code></pre>
  
  <p>Source: <a href="http://jsfiddle.net/Dg2Cb/" rel="nofollow">http://jsfiddle.net/Dg2Cb/</a></p>
  
  <p>I want to animate sub-menus height like on this page (looks like jswing effect): <a href="http://themes.truethemes.net/Karma/" rel="nofollow">http://themes.truethemes.net/Karma/</a></p>
  
  <p>Is there any easy (not messy like in example above) way of achieving this? </p>
  
  <p>Here's the best effect I've managed to create (but it still looks bad as it renders width too): <a href="http://jsfiddle.net/Dg2Cb/1/" rel="nofollow">http://jsfiddle.net/Dg2Cb/1/</a></p>
  
  <p>I can use jQuery easing plugin, but would love to do that without any plugins. I know how to animate height of an element, but the tricky part is I have to change its visibility and animate it at the same time.</p>