三级菜单实现（建议使用父子结构）

最新推荐文章于 2024-02-20 20:32:04 发布

冰派甜心

最新推荐文章于 2024-02-20 20:32:04 发布

阅读量991

点赞数

分类专栏： html css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/qq_37906822/article/details/90813586

版权

本文介绍了如何使用HTML和CSS创建三级导航菜单，通过父子结构实现菜单的层级展示，适用于网站导航设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>menu</title>
	<style>
		ul, li {
			margin: 0;
			padding: 0;
		}
		li {
			list-style-type: none;
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			color: white;
			border: 1px solid white;
		}
		.menu1 {
			float: left;
			background-color: black;
		}
		#menu2 {
			position: relative;
			top: 30px;
			left: 0;
		}
		.menu2 {
			background-color: pink;
			display: none;
		}
		.menu1:hover .menu2 {
			display: block;
		}
		#menu3 {
			position: relative;
			top: -30px;
			left: 100px;
		}
		.menu3 {
			background-color: #36C8C2FF;
			display: none;
		}
		.menu2:hover .menu3 {
			display: block;
		}
	</style>
</head>
<body>
	<ul>
		<li class="menu1">1
			<ul id="memu2">
				<li class="menu2">1

最低0.47元/天解锁文章