纯css实现多级菜单

转载 2015年07月10日 15:40:43
<!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>

相关文章推荐

css实现多级导航菜单

  • 2013年03月09日 20:07
  • 284KB
  • 下载

css+html+js实现下拉及多级弹出菜单

本文将使用css+html+js实现横向菜单,具有下拉的多级弹出菜单。 首先我们来看看效果图: 首先应该写html部分的代码,代码比较简单,代码如下: ...

纯CSS多级下拉菜单

  • 2014年12月11日 16:10
  • 108KB
  • 下载

CSS3实现动态多级菜单效果

以下是用CSS3的新特性做的三级菜单系列的效果,在不考虑兼容性的情况下,IE9以上的浏览器,火狐谷歌都可以流畅显示。 对应IE6,7,8来说,动态效果会没有,还需要再做一些HACK处理才行。 代码...

利用CSS、JQuery和div实现动态多级菜单

1、与前面不同,使用的CSS是class;前面的静态菜单使用的CSS是id方式。 我的菜单 div { margin:5px; padding: 5px; float:ri...
  • teamlet
  • teamlet
  • 2014年12月31日 00:02
  • 3452

纯 CSS 的多级菜单

无脚本,纯 CSS 实现,在非 IE 内核浏览器和 IE8+ 表现完美。 纯 CSS 多级菜单 .menu{} .menu ul,.menu li{m...
  • Triumph
  • Triumph
  • 2012年03月01日 14:44
  • 2470

纯CSS滑动显示多级菜单

a { text-decoration: none; /*取消下划线*/ } #menu ul { list-style: none; /*取消前缀符号*/ padding: 0; bord...

DIV+CSS多级下拉菜单示例

  • 2015年07月29日 09:27
  • 32KB
  • 下载

css多级下拉菜单

  • 2017年05月23日 13:33
  • 193KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯css实现多级菜单
举报原因:
原因补充:

(最多只允许输入30个字)