<!doctype html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
div,p,h1,h2,h3,h4,h5,h6,ul,a,{margin:0;padding:0;}
.box{
100%;
height:50px;
background:#555;
display:relative;
}
.nav:after{
content:'';
display:block;
clear:both;
}
.nav{
position:relative;
1100px;
height:50px;
margin:0 auto;
overflow:hidden;
}
.nav>li{
float:left;
height:50px;
font-size:20px;
color:#fff;
list-style:none;
font-weight:bold;
line-height:50px;
padding:0 30px;
position:relative;
z-index:10;
display:inline-block;
cursor:pointer;
overflow:hidden;
}
.nav>.active{
background:red;
padding:0 50px;
}
.leftbox{
position:absolute;
top:0;
left:40px;
background:#f00;
140px;
height:50px;
z-index:0;
}
</style>
</head>
<body>
<div class="box">
<ul class="nav">
<div class="leftbox"></div>
<li class="active">新闻</li>
<li>网页</li>
<li>资讯</li>
<li>娱乐</li>
<li>军事</li>
<li>互联网</li>
<li>网页</li>
<li>资讯</li>
<li>娱乐</li>
<li>军事</li>
<li>互联网</li>
</ul>
</div>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
<script>
$('li').mouseover(function(){
li_W = parseInt($(this).width());//当前li的宽
li_pad = $(this).css('padding');//当前li的内边距
li_pad =(li_pad.split('px')[1])*2;//当前li的内边距
W = li_W+li_pad+'px';//要设置的移动背景的宽
ul_left = $('.nav').offset().left;
li_left = $(this).offset().left;
var L = (li_left - ul_left);
$('.leftbox').stop().animate({left:L+'px'},100,function(){
$('.leftbox').css('width',W);//设置移动背景的宽
});
});
$('ul').mouseout(function(e){
var ul = $('ul')[0];
var e=e||window.event;
if(!isMouseLeaveOrEnter(e,ul)){
return false;
}
//console.log("=============");
$('.leftbox').css('width','100px').stop().animate({left:'40px'},500);
});
function isMouseLeaveOrEnter(e, handler) {
var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;
while (reltg && reltg != handler){
reltg = reltg.parentNode;
}
return (reltg != handler);
}
</script>
</body>
</html>