CSS Animated Menu

HTML

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Faq's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

CSS

#menu
{
	margin:0px;
	padding:0px;
	list-style:none;
	background:#000;
	height:40px;
	display:table;
}
#menu li
{
	float:left;
}
#menu li a
{
	display:block;
	height:40px;
	line-height:40px;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	text-decoration:none;
	background:#396;
	border-top:solid 3px #000;
	border-bottom:solid 3px #000;
	padding:0px 30px; -webkit-transition: all .3s ease-out; 
   -moz-transition: all .3s ease-out; 
   -o-transition: all .3s ease-out; 
   transition: all .3s ease-out;
}
#menu li a:hover
{  -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
   -ms-transform: scale(1.2);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
   M11=1.2, M12=-0, M21=0, M22=1.2);
}