HTML结构：
<div id="wrap">
<div id="content">
<ul>
<div id="slider"></div>
<li style="background:#c00;"><a href="###">首页</a></li>
<li ><a href="###">百家</a></li>
<li ><a href="###">财经</a></li>
<li><a href="###">娱乐</a></li>
<li ><a href="###">奥运会</a></li>
<li ><a href="###">互联网</a></li>
<li ><a href="###">时尚</a></li>
<li ><a href="###">汽车</a></li>
<li ><a href="###">国内</a></li>
<li ><a href="###">国际</a></li>
<li ><a href="###">军事</a></li>
<li><a href="###">视频</a></li>
<li><a href="###">传媒</a></li>
<li><a href="###">个性推荐</a></li>
<li><a href="###">名站</a></li>
<li><a href="###">更多</a></li>
</ul>
</div>
</div>
CSS样式：
<style type="text/css">
*{
margin:0;
padding:0;
overflow-x:hidden;
overflow-y:auto;
}
#wrap{
height:40px;
border:1px solid;
width:100%;
margin:100px 0;
background:#01204f;
}
#content ul{
width:980px;
height:40px;
margin:auto;
position:relative;
}
ul li{
list-style:none;
float:left;
position:relative;
z-index:5;
}
ul li a{
text-decoration:none;
color:white;
font-size:14px;
line-height:40px;
padding:0 10px;
margin-right:2px;
}
#slider{
width:50px;
height:40px;
background:#c00;
position:absolute;
top:0;
left:0;
}
</style>
JS行为：
<script>
$('li').mouseenter(function(){
$('#slider').animate({
left:$(this).offset().left - $('li').eq(0).offset().left,
},50)
$('#slider').css({
width:$(this).width(),
})
})
$('ul').mouseleave(function(){
$('#slider').css({
width:'50',
})
$('#slider').animate({
left:"0",
},200)
})
</script>
作者：平面网页设计web前端代码