html中利用hover制作三级菜单

最新推荐文章于 2024-03-30 18:20:23 发布

futianwenA

最新推荐文章于 2024-03-30 18:20:23 发布

阅读量1k

点赞数 1

分类专栏： HTML 文章标签： HTML hover 三级菜单

本文链接：https://blog.csdn.net/futianwenA/article/details/83999129

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		#div-nav{
			width: 100%;height: 70px;
			background: deepskyblue;
		}
		/*一级菜单*/
		.menu-1{
			width: 140px;height: 70px;
			background: lightgray;
			box-shadow: 2px 0px 5px black;
			margin-left: 30px;
			text-align: center;line-height: 70px;
			font-size: 20px;
		}
		.menu-1:hover{
			background: dimgray;
		}
		/*二级菜单*/
		#div-blogs-1{
			margin-left: 140px;display: none;margin-top: -70px;
		}
		.menu-2{
			width: 140px;height: 70px;
			background: lightgray;
			box-shadow: 2px 0px 5px black;
			text-align: center;line-height: 70px;
			font-size: 20px;
		}
		.menu-2:hover{
			background: dimgray;
		}
		/*三级菜单*/
		#div-myblogs-1{
			position: relative;left: 140px;top: -70px;display: none;
		}
		.menu-3{
			width: 140px;height: 70px;
			background: lightgray;
			box-shadow: 2px 0px 5px black;
			text-align: center;line-height: 70px;
			font-size: 20px;
			}
		#div-blogs:hover #div-blogs-1{
			display: block;
		}
		#div-myblogs:hover #div-myblogs-1{
			display: block;
		}
		.menu-3:hover{
			background: dimgray;
		}
	</style>
</head>
<body>
	<div id="div-nav">
		<!--一级菜单-->
		<div class="menu-1" id="div-user">用户</div>
		<div class="menu-1" id="div-blogs">博客
			<!--二级菜单-->
			<div id="div-blogs-1">
				<div class="menu-2" id="div-write">写博客</div>
				<div class="menu-2" id="div-watch">看博客</div>
				<div class="menu-2" id="div-myblogs">我的博客
					<!--三级菜单-->
					<div id="div-myblogs-1">
						<div class="menu-3" id="div-all">全部博客</div>
						<div class="menu-3" id="div-origin">只看原创</div>
						<div class="menu-3" id="div-reprint">只看转载</div>
					</div>
				</div>
			</div>
		</div>
		<div class="menu-1" id="div-flash">闪存</div>
		<div class="menu-1" id="div-integral">积分</div>
		<div class="menu-1" id="div-comment">评论</div>
		<div class="menu-1" id="div-attention">关注</div>
	</div>
</body>
</html>

futianwenA

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html中利用hover制作三级菜单

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &
复制链接

扫一扫