纯CSS下拉导航(兼容IE,ff,chrome及opera)的好处有很多:
1.不必用JavaScript或者jQuery实现,如果网页禁用了JavaScript或者网络慢都有可能影响性能;
2.纯CSS下拉导航不必依靠额外的js库,所以减少了不必要的http请求,加快了用户访问速度;
HTML代码如下:
<ul class="nav">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">About</a></li>
<li>
<a href="javascript:void(0)">Services</a>
<ul>
<li><a href="javascript:void(0)">Develop</a></li>
<li><a href="javascript:void(0)">Web</a></li>
<li><a href="javascript:void(0)">Design</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">Contact</a>
<ul>
<li><a href="javascript:void(0)">Email</a></li>
<li><a href="javascript:void(0)">QQ</a></li>
<li><a href="javascript:void(0)">Phone</a></li>
</ul>
</li>
</ul>
CSS代码如下:
/* 公共样式 */
ul{margin: 0;padding: 0;}
ul li{margin: 0;padding: 0;list-style:none;}
a{text-decoration: none;}
/* 内容部分 */
ul.nav{display:block;position: relative;font-size: 14px;}
ul.nav>li:first-child{border-top-left-radius: 10px;}
ul.nav>li:last-child{border-top-right-radius: 10px;}
ul.nav li{height: 40px;line-height: 40px;background: #aaa;}
ul.nav>li{width: 25%;float:left;box-shadow: inset 1px 0 0 #fff;}
ul.nav li a{display: block;text-align: center;color: #000;}
ul.nav>li>a{font-weight: bold;}
ul.nav ul{position: absolute;width: 25%;left: -999px;}
ul.nav li:hover ul{left: auto;}
ul.nav ul li{border-top: 1px solid #ccc;}
ul.nav li:hover{background: #bbb;}
ul.nav li:hover>a{color: #fff;}
最终效果如下: