此作品是一款非常实用的导航菜单效果，是在浏览微运5.0网站的时候把它整理出来分享的，跟前面分享的一款“美图秀秀网站二级导航菜单特效：http://www.jq-school.com/Detail.aspx?id=436”一样，是用纯css样式实现的，没有任何的javascript和jquery代码参与，代码结构很简洁，方便移植，大家好好利用哦。。。
核心样式代码如下：
.header{height:115px;border-top:5px solid #598b00;color:#fff;background:#1c2128;}
.header a,.header a:hover{color:#fff;text-decoration:none;}
.header .logo{width:172px;height:52px;margin:29px 36px 0 26px;float:left;background:url(../images/logo.png) 0 0 no-repeat;}
.header .nav{margin-top:40px;overflow:hidden;float:left;}
.header .nav li{float:left;padding:0 20px;background:url(../images/nav_line.png) 0 1px no-repeat;}
.header .nav li.first{background:none;}
.header .nav li a,
.header .nav li span{display:block;color:#fff;}
.header .nav li .tit{font:400 16px/1.25 \5FAE\8F6F\96C5\9ED1;}
.header .nav li .sub{font:400 10px/1.25 verdana,arial;color:#9b9b9b;}
.header .nav li a:hover .tit{color:#afafaf;}
.header .user{margin:46px 34px 0 0;float:right;}
.header .user a{float:left;margin:0 10px;font:400 14px/1.25 \5FAE\8F6F\96C5\9ED1;}
.header .user .reg{padding-left:28px;background:url(../images/icon_reg.png) 0 center no-repeat;}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
微运5.0 导航菜单 二级菜单 css美化