<div id="box"><ul><li><a href="javascript:void(0)">首页</a></li><li><a href="javascript:void(0)">内容</a></li><li><a href="javascript:void(0)">模板</a></li><li><a href="javascript:void(0)">招聘</a></li><li><a href="javascript:void(0)">介绍</a></li><li><a href="javascript:void(0)">成功</a></li><li><a href="javascript:void(0)">论坛</a></li><li><a href="javascript:void(0)">论坛</a></li><li><a href="javascript:void(0)">论坛</a></li><!--<li id="bgli"></li>--></ul>
</div>

* { padding: 0; margin: 0; }
#box { margin: 50px auto; height: 40px; background: #ccc; }
#box ul { position: relative; margin: 0 auto; width: 960px; }
#box li { float: left; margin-right: 0px; width: 100px; height: 40px; }
li { list-style: none; }
a { font-style: normal; position: relative; color: #efefef; text-align: center; line-height: 40px; text-decoration: none; display: block; z-index: 200 }
#bgli { position: absolute; background: red; border-radius: 10px; width: 70px; height: 40px; z-index: 100 }

!(function($){$.fn.extend({slider:function(sibling){sibling.first().after("<li id='bgli'></li>")$(this).hover(function(){var nowleft = $(this).position().left;var bjlileft = $("#bgli").position().left;if(nowleft>bjlileft){$("#bgli").stop().animate({left:nowleft+20},300,function(){$("#bgli").stop().animate({left:nowleft},100)})}else{$("#bgli").stop().animate({left:nowleft-20},300,function(){$("#bgli").stop().animate({left:nowleft},100)})}},function(){$("#bgli").stop().animate({left:0})return false;})}})
})(jQuery);//调用
$(function(){var $li = $("#box>ul li");$li.slider($li)
})