关闭

纯css实现多级菜单

137人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<title>无限级纯CSS的下拉菜单</title>
<style type = "text/css">
	/*初始化一些样式*/
	*{
		margin:0; 
		padding:0;
	}
	body{
		font-size:12px;
	}
	ul{
		list-style:none;
	}
	a{
		text-decoration:none;
		color:#1e395b;
	}
	
	 /*菜单居中显示*/
	.nav {
		width:502px; 
		height:30px;
		position: relative;
		margin:auto;
	}
	
	/*子菜单隐藏*/
	.nav ul{
		display:none; 
		width:100%; 
		position:absolute; 
		top: 5px;
		left: 99px;	/*控制子级菜单显示的位置*/
		background-color:#DAE6F4;
	}

	/*最后一个子级菜单向左显示*/
	.nav>ul>li:last-child>ul>li ul{
		left: -99px;
	}
	.nav li{
		width:99px; 
		height:30px;  
		position: relative;
	}
	.nav  a { 
		display:block; 
		width:99px; 
		height:30px; 
		line-height:30px; 
		text-align:center; 
	}
	.nav>ul>li { 
		width:99px; 
		height:30px; 
		float:left; 
		position:relative;		
		border-left:1px solid gray;
		border-bottom:1px solid gray;
	}

	.nav>ul>li:last-child { 
		border-right:1px solid gray;
	}
	
	/*主菜单为显示*/
	.nav>ul { 
		display: block;
		left: 0;
		top: 0;
	}	
	
	/*1级子菜单位置*/
	.nav>ul>li>ul{
		top: auto;
		left: auto;
	}
	
	/*本例的重点:如果当前节点还有子菜单的话则显示*/
	.nav a:hover + ul{
		display: block;
	}
	.nav ul:hover {
		display: block;
	}
	
	.nav li:hover {
		background-color:#f1f1bd;
	}
 

</style>
</head>
<body>
<div class = "nav">
	<ul>
	<li><a href = "#">menu 1</a>
		<ul>
		<li><a href = "#">menu 1-1</a>
			<ul>
				<li><a href = "#">menu 1-1-1</a></li>
				<li><a href = "#">menu 1-1-2</a></li>
				<li><a href = "#">menu 1-1-3</a></li>
			</ul>
		</li>     
		<li><a href = "#">menu 1-2</a>
			<ul>
				<li><a href = "#">menu 1-2-1</a></li>
				<li><a href = "#">menu 1-2-2</a></li>
				<li><a href = "#">menu 1-2-3</a></li>
			</ul>
		</li>     
		<li><a href = "#">menu 1-3</a>
			<ul>
				<li><a href = "#">menu 1-3-1</a></li>
				<li><a href = "#">menu 1-3-2</a></li>
				<li><a href = "#">menu 1-3-3</a></li>
			</ul>
		</li>     
		</ul>
	</li>
	<li><a href = "#">1</a>
		<ul>
		<li><a href = "#">2</a></li>     
		<li><a href = "#">2</a></li>     
		<li><a href = "#">2</a></li>     
		</ul>
	</li>
	<li><a href = "#">1</a>
		<ul>
		<li><a href = "#">2</a></li>     
		<li><a href = "#">2</a></li>     
		<li><a href = "#">2</a></li>     
		</ul>
	</li>
	<li><a href = "#">1</a>
		<ul>
		<li><a href = "#">2</a></li>     
		<li><a href = "#">2</a></li>     
		<li><a href = "#">2</a></li>     
		</ul>
	</li>
	<li><a href = "#">1</a>
		<ul>
		<li class="nav_jw"><a href = "#">2</a>
			<ul>
				<li><a href = "#">3</a></li>
				<li><a href = "#">3</a></li>
				<li><a href = "#">3</a></li>
			</ul>
		</li>     
		<li class="nav_jw"><a href = "#">2</a>
			<ul>
				<li><a href = "#">3</a></li>
				<li><a href = "#">3</a></li>
				<li><a href = "#">3</a></li>
			</ul>
		</li>     
		<li class="nav_jw"><a href = "#">2</a>
			<ul>
				<li>
					<a href = "#">3</a>
					 <ul>
						<li>
							<a href = "#">4</a>
							<ul>
								<li>
									<a href = "#">5</a>
								</li>
								<li><a href = "#">5</a></li>
								<li><a href = "#">5</a></li>
							</ul>
						</li>
						<li><a href = "#">4</a></li>
						<li><a href = "#">4</a></li>
					</ul>
				</li>
				<li><a href = "#">3</a></li>
				<li><a href = "#">3</a></li>
			</ul>
		</li>     
		</ul>
	</li>
	</ul>
</div>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:61376次
    • 积分:922
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:70篇
    • 译文:0篇
    • 评论:0条
    文章分类