先看看实际效果的演示

查看演示

HTML结构部分：

<ul id="nav">
  <li><span>HOME</span><a href="#">首页</a></li>
  <li><span>ABOUT</span><a href="#">我们</a></li>
  <li><span>SERVICES</span><a href="#">服务</a></li>
  <li><span>WORK</span><a href="#">工作</a></li>
  <li><span>CLIENT</span><a href="#">客户</a></li>
  <li><span>CONTACT</span><a href="#">联系</a></li>
</ul>

一个简单的无序列表，但是在a标签的前面添加了span标签，span标签在默认状态下是隐藏的，当鼠标在a标签悬停的时候，span标签将会以滑动的方式显示出来,这样就有了简单的动画效果。好了，再来看看CSS该怎么写。
CSS样式表部分：

#nav {
  width:432px;
  margin:49px auto 0; /*让元素在页面居中*/
}
#nav li {
  width:68px;
  height:88px;
  float:left;
  margin:0 2px;
  position:relative; /*li标签相对定位*/
  text-align:center;
  z-index:5;
  display:inline;
}
#nav li span {
  color:#fff;
  width:68px;
  background:url(nav_bg.png) no-repeat 0 0;/*滑动背景添加到span标签中*/
  position:absolute; /*span标签绝对定位*/
  top:0; left:0;
  z-index:10;/*span标签要在a标签的下面，所以层叠顺序要小于a标签的层叠顺序*/
  font-size:11px;
  height:58px;
  padding-top:30px;
  display:none;/*在默认状态下span标签是隐藏的*/
}
#nav li a {
  color:#202020;
  font-size:14px;
  letter-spacing:0.5px;
  width:68px;
  display:block;
  position:absolute;/*a标签也同样需要绝对定位*/
  top:0; left:0;
  z-index:20;/*但是a标签的层叠顺序应该是大于span标签的，这样才能确保a标签不被span标签遮盖住*/
  height:35px;
  padding-top:55px;
  text-decoration:none;
}

jQuery动画部分：

$(function(){
  $('#nav li').children('a').hover(function(){
  $(this).siblings('span').slideDown(100);
  var changeColor = this;
  this.timer = setTimeout(function(){
    $(changeColor).css({'color':'#fff'});
    },100);
},function(){
  if(this.timer) clearTimeout(this.timer);
  $(this).siblings('span').slideUp(100);
  $(this).css({'color':'#202020'});
  });
});

转自：http://stylechen.com/blue_slide_nav.html