说起特效，感觉还是css3的效果好，加载速度快，便于修改，这里从茶话博客这里找到一款css3导航。
但是貌似最近不流行这种特效了。
现在流行的精简风格，先记录下来备用。

以下转自http://www.xinsenz.com/archives/1159.html

实现方法，给菜单栏添加CSS效果：

#menu ul li a {
    display: block;
    border-bottom: 0;
    color: #6a6a6a;
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    height: 41px;
    margin-bottom: -1px;
}
#menu ul li a:after,
#menu ul li a:before {
    position: absolute;
    width: 0;
    height: 1px;
    left: 50%;
    bottom: 0;
    border-bottom: 1px solid #6a6a6a;
    content: “”;
    z-index: 999;
        -webkit-transition: width .3s, left .3s;
        -moz-transition: width .3s, left .3s;
        transition: width .3s, left .3s;
}
#menu ul li a:hover:before {
    left: 0;
    width: 60%;
}
#menu ul li a:hover:after {
    width: 50%;
}

这个效果在在IE10、chrome和firefox上都能正常显示，由于浏览器版本的原因，可能会出现不支持的现象，那么只需在你header部分给菜单栏手动添加属性ID，

1.<a id="hover-animate">你的菜单栏对应的属性名称<span class="hover-animate-left"><span class="hover-animate-right">

然后再加CSS效果

#hover-animate {
color:#21759b!important;
cursor:pointer;
margin-left:20px;
display:inline-block;
border-bottom:0;
color:#6a6a6a;
text-transform:uppercase;
text-decoration:none;
position:relative;
text-decoration:none;
}
.hover-animate-left,.hover-animate-right {
position:absolute;
width:0;
height:1px;
left:50%;
bottom:0;
border-bottom:1px solid #6a6a6a;
content:“”;
z-index:999;
-webkit-transition:width .3s,left .3s;
-moz-transition:width .3s,left .3s;
transition:width .3s,left .3s;
}
#hover-animate:hover .hover-animate-left {
left:0;
width:60%;
}
#hover-animate:hover .hover-animate-right {
width:50%;
}