纯css实现多级菜单

最新推荐文章于 2022-05-17 11:14:38 发布
最新推荐文章于 2022-05-17 11:14:38 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： css 
<!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>

BeautyMyth
关注
专栏目录
纯CSS多级菜单(横向)
07-14
纯CSS多级菜单(横向)，HTML代码和CSS代码。使用时直接拷贝到网页即可
纯 CSS 的多级菜单
Triumphal
03-01 3190
无脚本，纯 CSS 实现，在非 IE 内核浏览器和 IE8+ 表现完美。 纯 CSS 多级菜单 .menu{} .menu ul,.menu li{margin:0; padding:0;list-style:none outside;} .menu>ul{overflow:auto; display:inline-block;} .men
css实现多级菜单
zz_xyz的博客
02-25 303
实现原理 用ul和li 来展示多级菜单，当ul上有鼠标时，就展开该ul下的所有li标签， 当ul(包括其下面的li)没有鼠标时候，该ul就被隐藏 当然 多级菜单也可以用js来实现~~~ 代码如下：存为 menu.html 即可查看效果 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w...
纯CSS多级菜单
aixiaoxue520的专栏
04-14 1227
纯CSS多级菜单2 这部分最后给出的成品效果比较惊人，也就是传说中的纯CSS六级菜单。这个东西最厉害的地方是兼容所有主流浏览器（IE6，IE8，Maxthon2.5，firefox3.5，opera10，safari4与chrome2），而一点CSS hack也没有用。毕竟CSS hack只是权宜之计，治标不治本，谁知它会对未来新版本的浏览器有什么副作用，因此能不用就不要用了。由于结构非常有规律
纯css多级菜单
weixin_30542079的博客
03-30 94
html页面： View Code 1 2 <!doctype html> 3 <title>纯CSS多级菜单by 司徒正美</title> 4 <meta charset="utf-8"/> 5 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> ...
纯css实现多级折叠菜单折叠树效果
09-24
- 在使用纯CSS制作多级菜单时，建议对可能遇到的样式冲突有所准备，并在多种环境下测试菜单的效果，确保最佳的兼容性和用户体验。 通过上述知识点的介绍，我们可以了解到如何利用纯CSS实现一个多级折叠菜单，并对...
纯CSS实现的多级下拉横向导航菜单代码
01-23
5. **display属性**：`display`属性在创建多级菜单时扮演重要角色。我们可以使用`none`隐藏下拉菜单，当鼠标悬停在父菜单项上时，通过改变`display`值为`block`或`inline-block`来显示子菜单。 6. **伪类选择器**：...
纯CSS实现鼠标经过多级下拉透明导航菜单代码
01-23
这个简单的CSS实现不仅展示了如何创建透明多级下拉菜单，还涵盖了响应式设计的基本概念。通过调整HTML结构和CSS样式，你可以根据实际需求定制更复杂的菜单样式。记住，实践是最好的老师，动手尝试修改代码，以更好地...
css案例1——一级菜单、二级菜单、三级菜单、四级菜单
努力、拼搏、奋进
05-17 9229
纯css实现二级菜单、三级菜单、四级菜单，代码易理解，上手操作快。
css+js实现左侧多级菜单，可扩展图标及导航图片
06-23
css+js实现左侧多级菜单，可扩展图标及导航图片
DIV+CSS多级下拉菜单示例
07-29
超级实用的多级下拉菜单示例！非常实用哟！
html js树形图多级菜单美观可配置
01-22
html js树形图，美观大方，界面友好，可配置，也可自己重新调整样式，美观的菜单列表，多级列表，三级及三级以上列表，可自行配置
CSS设计多级菜单
学习
12-22 1146
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;
CSS3实用多级下拉菜单
linhd1102的博客
08-01 466
http://www.codefans.net/jscss/code/4243.shtml
CSS水平多级下拉菜单
chase-wang的专栏
03-16 1041
CSS代码 .menu { text-align:left; color:#FFF; font-family:幼圆; /*菜单字体*/ height:26px; width:100%} .menu ul.menuBar{ list-style:none; margin:0px; font-size:12pt; /*一级菜单字体大小*/} .menu ul.menuBar li{ float:l
纯CSS滑动显示多级菜单
tyt叮当tyt的专栏
06-20 837
a { text-decoration: none; /*取消下划线*/ } #menu ul { list-style: none; /*取消前缀符号*/ padding: 0; border-top: 1px solid #fff; /*border用于设置菜单边界线，可有可无*/ border-left: 1px solid #fff; } #menu ul li { flo
用CSS做的两层菜单和四层菜单
coding
01-03 877
下面是html代码--------------------------------------------------------------------------------        第一层                            第二层                                            第三层                  
css+html实现四级下拉菜单
qq_37171273的博客
01-15 1616
/*对全局进行设置*/ *{margin:0px;padding:0px;} body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#000;} a{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-decoration:none;border:1p
纯CSS横向多级菜单实例与代码
<title>CSS多级菜单 <!-- 引入CSS样式表 --> <link href="js/c3.css" rel="stylesheet" /> <!-- 菜单部分 --> <div id="head">head <!-- 第一级菜单 --> 粿ƶ <li><a href="#">ȫ</a></li> <li>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值