title: dynamic calculation of li height
body: <p>I have the following <a href="http://jsfiddle.net/3shEE/182/" rel="nofollow">code</a> </p>
  
  <p>The issue is that currently I am hardcoding the height when hovered to be 300, how do I do it such that it gets the height based on the number of <li> tag it has, so say there are 6 <li> and each li is 50px height so then the height is 300.</p>
  
  <p>I am talking about this line specifically:</p>
  
  <pre><code> $(this).stop().animate({"height":"300px"},1000).addClass("dropped");
  </code></pre>
  
  <p>Also how do I make it such that when it's already expanded, and I click on it again it animates back un-expanded</p>