<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding:0;
margin:0;
}
ul,li{
list-style:none;
}
.nav{
height:30px;
background:rgba(224,0,0,.5) !important;
}
.nav li{
float:left;
padding:0px 20px;
line-height:30px;
height:30px;
cursor:pointer;
}
.nav li a{
color:#fff;
text-decoration:none;
display: block;
}
.nav li:hover{
background:red;
}
.box{
position:relative;
}
.active{
position:absolute;
height:5px;
background:orange;
}
</style>
<body>
<div class="box">
<ul class="nav">
<li class="hover"><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单7</a></li>
<li><a href="#">菜单8</a></li>
<li><a href="#">菜单9</a></li>
</ul><!--nav-->
<div class="active"></div>
</div><!--box-->
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
//获取第一个li的宽度
var firstLiWidth = $('.nav li').eq(0).outerWidth();
//定义动画菜单的宽度
$('.active').css('width', firstLiWidth+'px');
//鼠标进入时，active跟随，根据它的索引值来定位
$('.nav li').mouseover(function(){
// alert($(this).index());
$('.active').stop().animate({
left: $(this).index() * firstLiWidth +'px'
}, 400);
}).mouseout(function(){
//鼠标离开的时候，遍历所有li然后根据哪个有 hover这个class的时候那么鼠标就停留在那里
$('.nav li').each(function(){
if ($(this).hasClass('hover')) {
$('.active').stop().animate({
//根据它的索引值和第一个菜单宽度来定它的位置
left: $(this).index() * firstLiWidth +'px'
}, 400);
};
});
});
//鼠标点击的时候加上class让它进行active的定位
$('.nav li').click(function(){
$(this).addClass('hover').siblings().removeClass();
});
})
</script>