How to make animated vertical menu in css

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<ul id="verticle-menu">
	<li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Services</a></li>
    <li><a href="#">About Company</a></li>
    <li><a href="#">Our Products</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS

#verticle-menu
{
	list-style-image:url(https://lh4.googleusercontent.com/-501sxdMtYkc/VAc5BD0YHTI/AAAAAAAACdA/BvUFOIQwJlY/s0-U-I/list-icon.png);
}
ul{display:inline-flex;}
#verticle-menu li
{
margin:5px 10px;	
}
#verticle-menu li a
{
	text-decoration:none;
	color:#333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}
#verticle-menu li a:hover
{
	font-weight:bold;
}

JavaScript

$(document).ready(function(e) {
    $('#verticle-menu li').hover(function(){
		$(this).stop(true,false).animate({"marginLeft":"20px"},300);
	},function(){
		$(this).stop(true,false).animate({"marginLeft":"0px"},300);
		});
});