纯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实现多级菜单

实现原理 用ul和li 来展示多级菜单,当ul上有鼠标时,就展开该ul下的所有li标签, 当ul(包括其下面的li)没有鼠标时候,该ul就被隐藏 当然 多级菜单也可以用js来实现~~~ 代码如下:...
  • aa_moon
  • aa_moon
  • 2016年12月02日 15:47
  • 623

纯css实现三级菜单栏

之前已经介绍了如何使用纯css实现二级菜单栏,其实三级菜单栏就是在二级菜单栏的基础上实现的。 我们先做成这个样子: 可以看到,这里我们在“关于我们”——“我们的故事”下面添加了三级菜单,这个只需要...
  • h1580824951
  • h1580824951
  • 2016年04月17日 11:48
  • 5441

纯CSS多级导航栏

前一段时间再看《精通CSS》的时候,磕磕绊绊的写出了一个纯CSS导航栏,晚上突然想到了这个,把它重写一遍。在这个过程中发现自己比之前有了些许提高,我想应该是之前做的优酷整站练习的功劳吧,这个整站练习中...
  • rabbitter
  • rabbitter
  • 2016年04月11日 20:43
  • 2750

纯CSS多级菜单

纯CSS多级菜单2 这部分最后给出的成品效果比较惊人,也就是传说中的纯CSS六级菜单。这个东西最厉害的地方是兼容所有主流浏览器(IE6,IE8,Maxthon2.5,firefox3.5,opera...
  • aixiaoxue520
  • aixiaoxue520
  • 2014年04月14日 00:42
  • 704

纯 CSS 的多级菜单

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

纯CSS实现tab切换

用单选框的:checked伪类和相邻选择器实现 代码如下: input, .table-content{ display:none; } #tab1:checked...
  • wangweiscsdn
  • wangweiscsdn
  • 2016年11月18日 15:15
  • 805

纯css实现 页面加载动画

http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
  • java_goodstudy
  • java_goodstudy
  • 2016年11月16日 02:39
  • 907

纯CSS滑动显示多级菜单

a { text-decoration: none; /*取消下划线*/ } #menu ul { list-style: none; /*取消前缀符号*/ padding: 0; bord...
  • suwing6406029
  • suwing6406029
  • 2014年06月20日 01:04
  • 537

纯CSS实现表单验证

ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele...
  • whqet
  • whqet
  • 2015年02月07日 17:10
  • 9011

纯CSS实现的Loading效果

纯CSS实现的Loading效果,CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。...
  • whqet
  • whqet
  • 2014年02月18日 15:34
  • 3490
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯css实现多级菜单
举报原因:
原因补充:

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