下拉菜单(纯CSS完成)

原创
2016/05/13 11:08
阅读数 304
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>下拉菜单</title>		
		<style type="text/css">
		*{margin: 0;padding: 0;list-style:none;text-decoration-line: none;}
		#menue{background-color: #FFFACD;width: 400px;text-align: center;margin: 20px auto;}
		.munueUl1>li{display:inline-block;padding:5px 20px;position:relative;}	
		.munueUl1>li:hover{background-color: #CCC;}		
		.munueUl1 li ul li{padding:0 20px;background-color:#BDB76B;margin: 2px 0;}	
		.munueUl1 li ul li:hover{background-color:gray;margin: 4px 0;border-radius: 5px;}
		.munueUl1 li>ul{position:absolute;top: 30px;left: 0px;padding:0;display:none;}	
		.munueUl1 li:hover ul{ display:block;}	
		</style>
	</head>
	<body>
		<div id="menue">
			<ul class="munueUl1">
				<li class="menueLi1"><a href="#">童装</a>
					<ul class="menueLi1Ul">
						<li><a href="#">衣服</a></li>
						<li><a href="#">裤子</a></li>
						<li><a href="#">鞋子</a></li>
					</ul>
				</li>
				<li class="menueLi2"><a href="#">女装</a>
					<ul class="menueLi2Ul">
						<li><a href="#">衣服</a></li>
						<li><a href="#">裤子</a></li>
						<li><a href="#">鞋子</a></li>
					</ul>
				</li>
				<li class="menueLi3"><a href="#">男装</a>
					<ul class="menueLi3Ul">
						<li><a href="#">衣服</a></li>
						<li><a href="#">裤子</a></li>
						<li><a href="#">鞋子</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

 

展开阅读全文
打赏
2
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
2
分享
返回顶部
顶部