Creates dropdown menu animation using GSAP (Greensock). Set .dropdown with overflow:hidden and remove min-height or set to 0. Markup for menu would be <ul id="main_menu"><li><a href="#">something</a></li><li class="has-dropdown"><a href="#">something with submenu</a><ul class="dropdown"><li>something</li><li>sdfg</li></ul></li></ul>

gistfile1.txt

// main navigation
var subMenus = $("#main_menu .dropdown");

$.each($("li.has-dropdown"), function(index, element)
{
	var subMenu = $(element).children('ul'),
      tl;
	
	if(subMenu.length != 0)
	{
		tl = new TimelineLite({paused:true});
		
		tl.from(subMenu, .2, {height:0});
		
		element.subMenuAnimation = tl;
		
		$(element).hover(menuItemOver, menuItemOut);
                
	}
});

function menuItemOver()
{
	this.subMenuAnimation.play();
}

function menuItemOut()
{
	this.subMenuAnimation.reverse();
}


              /*
              ==>FUNCTION TO FIX LI ITEMS WIDTH IN IE7
              */
              function setWidth()
              {
                      //this function executes only if the browser is IE7
                      if($("html").hasClass('lte7'))
                      {
                              //because of a bug with IE7 we need to calculate any element's width before the li's elements width
                              
                              //we loop through the subMenu elements
                              $.each(subMenus, function(index, element)
                              {
                                      var subMenuChildren = $(element).children('li'),
                        elemWidths = [],
                        maxWidth;
                                      
                                      //loop through all the child elements of the current subMenu
                                      $.each(subMenuChildren, function()
                                      {
                                              elemWidths.push($(this).outerWidth());
                                      })//sub menu children loop END
                                      
                                      //we get the biggest width
                                      maxWidth = Math.max.apply(null, elemWidths);
                                      
                                      //apply the biggest width to all the elements
                                      subMenuChildren.css('width',maxWidth);
                                      
                              });//sub menu elements loop END
                              
                      }//IE7 conditional END
                      
              }
              
              setWidth();