纯CSS制作下拉导航

淡风wisdon大大 2015-04-06

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

      最终效果如下:


纯CSS制作下拉导航
 
纯CSS制作下拉导航

相关推荐

aSuncat / 0评论 2020-08-18