<ul id="menu-menu">
 
	<li class="current-menu-item"><a>首页</a></li>
 
	<li class=""><a>折腾</a></li>
 
	<li class=""><a>生活</a></li>
 
</ul>

 
#menu-menu{position:relative;}
 
#menu-menu li a{position:relative;z-index:2;}
 
#menu-menu .huad{height:30px;border-top:2px solid #1BA1E2;border-bottom:2px solid #1BA1E2;position:absolute;top:0px;z-index:1;}

 
//By ImMmMm.com
 
var mm=$('#menu-menu');  //一般只需修改这儿的ID
 
var mmc=mm.find('.current-menu-item');  //获取需要高亮的对象，current-menu-item为WordPress自定义导航生成
 
var mml=mmc.position().left;  //高亮对象相对父级元素的左边距
 
var mmw=mmc.width();  //获取高亮对象的宽度
 
mm.append("<li class='huad' style='left:"+mml+"px;width:"+mmw+"px'></li>");  //追加滑动样式的html代码，并设定宽度和左边距
 
var mmh=mm.find('.huad');  //获取滑动对象
 
mm.children('li').hover(function(){  //此导航下li鼠标移上去的事件
 
	var anm=$(this).position().left;  //此子项相对父级元素的左边距
 
	var anw=$(this).width();  //此子项的宽度
 
	mmh.animate({left:anm,width:anw},{queue:false,duration:300});  //滑动对象左边距和宽度的自定义动画，300毫秒内触发一次
 
	},function(){  //鼠标移开事件
 
	mmh.animate({left:mml,width:mmw},{queue:false,duration:300});  //滑回
 
});