详尽分享简单通用的导航条

1、下划线效果

鼠标悬停下划线效果

*{ margin:0; padding:0; list-style:none;}

.header{ width:100%; background:;}

.nav{ //代码效果参考：http://www.zidongmutanji.com/bxxx/101856.html

.nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}

.nav ul li a{ color:#666; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;}

.nav ul li a:hover{ color:#000; text-decoration:none;}

.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#F5F5F5; top:58px; left:50%;}