How to Create Menu Hover effect with Transition

 
		 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"> </script>
		<script src='https://owaisbikiya.com/stackui.blogspot/js/jquery.spasticNav.js'/> </script> 
		

				
					<nav id="nav"> 
					 //add your ul li menu here 
					</nav>
			

				
					<nav id="nav"> 
					   <ul>
						<li id="selected"><a href="#">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#AskAnyQuestion">Ask Any Question?</a></li>
						<li><a href="#contact">Contact</a></li>
					  </ul>
					</nav> 
			

				 
#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
z-index: 1;
top: 0;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}

#nav {
    position: relative;
    background: #292929;
}

#nav li {
    list-style: none;
    border-right: 1px solid #4a4a4a;
    border-left: 1px solid black;
}

#nav li a {
    color: #e3e3e3;
    z-index: 2;
    position: relative;
    cursor: pointer;
    font-size: 30px;
    font-family: helvetica, arial, sans-serif;
    text-decoration: none;
    padding: 30px 45px;
    width: 100%;
    font-weight: lighter;
}
			

				
				$('#nav').spasticNav();