<link rel="stylesheet" href="/css/styles.css" type="text/css" media="all"/>
  <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="/js/jquery.delay.js"></script>
  <script type="text/javascript" src="/js/jquery.backgroundPosition.js"></script>
  <script>
$(document).ready(function() {
$("#menu, #white_line").css("opacity","0");  
$("#menu").stop().animate({  
opacity: 0.9,  
marginLeft: '50px'
}, 2400, 'easeInSine');  
$('#white_line').stop().animate(  
{opacity: 0.7},  
{duration:2400,easing: 'easeInSine'  
})  

$('#menu span').mouseenter(function(element) {  
$("#menu ul li").css("opacity","1");  
$('#white_line').stop().animate(  
{top: 40, height:290},  
{duration:500,easing: 'easeOutBack'}  
)  
$("#menu ul li").eachDelay(function(){
$(this).stop().animate({  
opacity: 1,  
marginLeft: '0px',  
backgroundPosition: "150px 0px"  
}, 600, 'easeOutBack');
}, 30);
});  

$('#menu').mouseleave(function(element) {  
$("#menu ul li").eachDelay(function(index){
$(this).stop().animate({  
opacity: 0,  
marginLeft: '-200px',  
backgroundPosition: "150px 0px"  
}, 600, 'linear');
if(index == $("#menu ul li").size() -1){  
$('#white_line').stop().animate(  
{top: 79, height:1},  
{duration:600,easing: 'easeInBack'  
})  
}  
}, 30);  

});  

$('#menu ul li').mouseenter(function(element) {
$('#menu ul li').not(this).stop().animate({  
backgroundPosition: "150px 0px",  
opacity: '0.5'
}, 500, 'linear');  
$(this).stop().animate({  
backgroundPosition: "300px 0px",  
opacity: '1'
}, 600, 'easeOutBounce');
$(this).find('a').css("color","#916153");  
});  

$('#menu ul li').mouseleave(function(element) {
$(this).stop().animate({  
backgroundPosition: "150px 0px",  
opacity: '1'
}, 200, 'linear');
$(this).find('a').css("color","#000");  
});  

});
  </script>

<div id="white_line"></div>
  <div id="menu">
<span></span>
<ul>
<li class="item1"><a href="">New Arrivals</a></li>
<li class="item2"><a href="">Dresses</a></li>
<li class="item3"><a href="">Polos</a></li>
<li class="item4"><a href="">Blouses</a></li>
<li class="item5"><a href="">Sweaters</a></li>
<li class="item6"><a href="">Pants </a></li>
<li class="item7"><a href="">Jeans</a></li>
<li class="item8"><a href="">Jackets</a></li>
<li class="item9"><a href="">Footwear</a></li>

</ul>
</div>
<div style="clear:both;"></div>