awesome jquery slide menu

   <script type="text/javascript" src="jquery-latest.pack.js"></script>
    <script type="text/javascript" src="slide.js"></script>  
    <link href="style.css" rel="stylesheet" type="text/css" />

 <div id="menu" class="menu">
	 <ul>
	 <li><a href="javascript:;">Home</a></li>
	 <li><a href="javascript:;">HTML/CSS</a></li>
	 <li><a href="javascript:;">JavaScript</a></li>
        <li><a href="javascript:;">Resources</a></li>
	<li><a href="javascript:;">Tutorials</a></li>
	<li><a href="javascript:;">About</a></li>
	 </ul>
 </div>

/** style need add for slide menu **/	
 
		.menu ul li a span { 
			position: absolute;
			left: 0;
			width: 110px;
		}
 
		.menu ul li a span.out {
			top: 0px;
		}
 
		.menu ul li a span.over,
		.menu ul li a span.bg {  
			top: -45px;
		}
 
		/** image background **/
 
		#menu {
			background:url(bg_menu.gif) scroll 0 -1px repeat-x;
			border:1px solid #CCC;
		}
 
		#menu ul li a {
			color: #000;
		}
 
		#menu ul li a span.over {
			color: #FFF;
		}
 
		#menu ul li span.bg { 
			height: 45px;
			background: url(bg_over.gif) center center no-repeat;
		}
 
		/** color background **/
 
		#menu2 {
			background:#45A8DF;
		}
 
		#menu2 ul li a {
			color:#FFF;
		}
 
		#menu2 ul li a span.over {
			background: #A6DD00;
			color:#333;
		}
		#menu2 ul li.nav1 a span.over {
			background: #fea274;
		}
		#menu2 ul li.nav2 a span.over {
			background: #b0bbba;
		}
		#menu2 ul li.nav3 a span.over {
			background: #a3f091;
		}
		#menu2 ul li.nav4 a span.over {
			background: #86dbf9;
		}
		#menu2 ul li.nav5 a span.over {
			background: #e0caf0;
		}
		#menu2 ul li.nav6 a span.over {
			background: #9dace9;
		}