纯CSS制作下拉导航

      纯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;}

      最终效果如下：