How to make animated Jquery Drop Down Menu

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<ul id="menu">
	<li><a href="#">Home</a>
	<ul>
	    <li><a href="#">Sub Menu 1</a>
	    <li><a href="#">Sub Menu 2</a>
            <li><a href="#">Sub Menu 3</a>
            <li><a href="#">Sub Menu 4</a>
	</ul>
</li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">FAQ's</a>
	<ul>
	    <li><a href="#">Sub Menu 1</a>
	    <li><a href="#">Sub Menu 2</a>
            <li><a href="#">Sub Menu 3</a>
            <li><a href="#">Sub Menu 4</a>
	</ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS

#menu
{
	display:inline-block;
	margin:0px;
	padding:0px;
	list-style:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	overflow:hidden;
	height:50px;
	background: #ffd65e; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */

}
#menu li
{
	float:left;
}
#menu li a
{
	display:block;
	height:50px;
	line-height:50px;
	color:#604907;
	text-decoration:none;
	padding:0px 25px;
	font-weight:bold;
	text-shadow:1px 1px 1px #f5e1a9;
	border-right:solid 1px #69510e;
	border-left:solid 1px #f5e1a9;
}
#menu li:first-child a{border-left:none;}
#menu li:last-child a{border-right:none;}
#menu li a:hover
{
	background:#444;
	color:#fff;
	text-shadow:none;
}
#menu li ul
{
	display:none;
	position:absolute;
	list-style:none;
	margin:30px 0px 0px 0px;
	padding:0px;
	opacity:0;
	background:#7fc115;
	}
#menu li ul li{
	float:none;
	}
#menu li ul li a
{
	border:none;
	border-bottom:solid 1px #fff;
	color:#fff;
	text-shadow:none;
}

JavaScript

$(document).ready(function(){
	$('#menu li').hover(function(){
		$(this).find('ul').css("display","block");
		$(this).find('ul').stop(true,false).animate({"opacity":"1","marginTop":"0px"},300);
	},function(){
		
		$(this).find('ul').animate({"opacity":"0","marginTop":"30px"},300,function(){
			$(this).css("display","none");
			});
		});
});