前端用显示隐藏样式实现三级菜单的效果（display实现）

小小红色无花果

已于 2022-11-21 00:06:25 修改

阅读量503

点赞数

文章标签：前端 javascript html

于 2022-11-21 00:06:00 首次发布

本文链接：https://blog.csdn.net/weixin_45096939/article/details/127956649

版权

总计隐藏div的方式有四种：

（1）.style.display="none" （隐藏之后不占位）

（2）.style.visibility="hidden" （隐藏之后占位）

（3）.style.opacity=0 （隐藏之后占位）

（4）.style.height="0"

.style.border="0px solid #fff" （隐藏之后占位）

三级菜单效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三级菜单</title>
	<style type="text/css">
		*{margin: 0;padding: 0;border: 0;}
		ul{list-style: none;}
		a{text-decoration: none;color: #000;}
		
		#menu ul{
			width: 408px;
			margin: 0 auto;
			margin-top: 50px;
			font-family: 楷体;
			font-size: 16px;
		}
		#menu ul li dl{display: none;}
		#menu ul li{
			float: left;
			border-left: 1px solid #fff;
			border-right: 1px solid #0013b0;

		}
		#menu ul li a{
			display: block;
			width: 80px;
			height: 30px;
			background: green;
			line-height: 30px;
			text-align: center;
		}
		#menu ul li:hover dl{display: block;}
		#menu ul li dl dd a:hover{background: pink;}
		#menu ul li dl dd{position: relative;}
		#menu ul li:hover dl dd dl{display: none;}
		#menu ul li:hover dl dd:hover dl{display: block;position: absolute;left: 80px;top: 0px;}

		#menu ul li dl dd dl dd a{background: #ccc;}
		
	</style>
</head>
<body>
	
<div id="menu">
	<ul>
		<li><a href="#">文科类</a>
			<dl>
				<dd><a href="#">语文</a></dd>
				<dd><a href="#">政治</a></dd>
				<dd><a href="#">历史</a>
					<dl>
						<dd><a href="#">现代史</a></dd>
						<dd><a href="#">古代史</a></dd>
						<dd><a href="#">人类史</a></dd>
					</dl>
				</dd>
			</dl>
		</li>
		<li><a href="#">理科类</a></li>
		<li><a href="#">艺术类</a></li>
		<li><a href="#">体育类</a></li>
	</ul>
</div>

</body>
</html>

小小红色无花果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端用显示隐藏样式实现三级菜单的效果（display实现）

style.border="0px solid #fff" （隐藏之后占位）（2）.style.visibility="hidden" （隐藏之后占位）（1）.style.display="none" （隐藏之后不占位）（3）.style.opacity=0 （隐藏之后占位）
复制链接

扫一扫