对于导航栏的实现对于前端人员来说再简单不过了，但是如何让我们的导航看起来生动，给用户一种很高大上的感觉，却需要我们好好设计一下。今天我给大家带来的是我自己在项目中用到的一个例子，当我们鼠标滑过导航栏时li下会出现一个下划线动画效果，一起看一下具体效果是什么样子的：
jquery css实现鼠标滑过导航菜单栏动画效果
是不是很牛掰的样子，不着急，源码马上呈上来：
HTML代码
码云笔记
HTML/CSSJavaScriptNode.js手机移动前端安全性能优化类库框架开发调试浏览器面试经验
css代码
*{ margin:0; padding:0; list-style:none;}
.header{ width:100%; background:#3E4147;height:50px;}
.logo{float:left;height:50px;margin:0 25px;}
.logo img{display:block;width:60px;height:40px;float:left;margin:5px 0;}
.logo span{display:block;float:left;font-size:22px;color:#fff;line-height:50px;margin-left:15px;cursor:pointer;}
.nav{width:767px;height:50px;float:left;overflow:hidden;}
.nav ul{width:767px;height:50px;}
.nav ul li{ height:30px; line-height:30px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}
.nav ul li a{ color:#cbcbcb; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;}
.nav ul li a:hover{ color:#6bc30d;}
.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#6bc30d; top:48px; left:50%;}
jQuery代码
$(function(){
$('.nav li').hover(function(){
$(this).find('span').stop().css('height','2px');
$(this).find('span').animate({
left:'0',
width:'100%',
},200);
},function(){
$(this).find('span').stop().animate({
left:'50%',
width:'0'
},200);
});
});
注意：记得引入jQuery库哦！
整个实现流程代码都在这里了，用到的时候直接拿去就可以用，项目亲测相当给力，当然还有更好的设计大家可以根据自己的需要在修改。
当然上面只是我的实现思路，当然你也可以纯css hover加伪元素也是可以做到的，更多的方法欢迎留言讨论。
