制作三级菜单

最新推荐文章于 2025-05-03 14:12:46 发布

原创最新推荐文章于 2025-05-03 14:12:46 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#菜单水平 #隐藏菜单 #点击时显示菜单 #二级菜单制作 #多级菜单制作

web前端开发专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用HTML和CSS构建一个具有多级下拉菜单的导航栏，包括隐藏和显示不同级别的菜单项，以及调整菜单样式。

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

先用HTML打好结构

<ul>//一级菜单

<li><ahref="">Three</a></li>

<ul>//二级菜单

<li><ahref="">Four.three</a>

<ul>//三级菜单

<li><ahref="">Four.three.one</a></li>

<li><ahref="">Four.three.two</li>

<li><ahref="">Four.three.three</a></li>

<li><ahref="">Four.three.four</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

让菜单起作用的关键在于先把它藏起来：

/*隐藏二级菜单*/

li ul {display:none;}

然后，再在父元素悬停时把它显示出来：

/*显示二级菜单*/

li:hover > ul {display:block;}

用Css增添样式

//一级菜单水平摆放

.menu li{

float:left;

list-style-type:none;

padding:10px;

}

//二级菜单不显示

.menu li ul{

display:none;

}

//点击一级菜单中的li元素时，二级菜单显示并隐藏三级菜单

.menu li:hover ul{

display:block;

}

.menu li:hover li ul{

display:none;

}

//点击二级菜单中的li元素时，显示三级菜单

.menu li li:hover ul{

display:block;

position:absolute;

left:120%;

top:0%;

}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三栏布局P80</title>
	<style>
	  .menu li{
	  	float: left;
	  	list-style-type: none;
	  	padding:10px;
	  }
	  .menu li a{
	  	text-decoration: none;
	  }
	  .menu li ul{
	  	display: none;
	  }
	  .menu li:hover ul{
	  	display: block;
	  }
	  .menu li li{
	  	float: none;
	  	position: relative;
	  	left: -50%;
	  	top: 0%;
	  }
	   .menu li:hover li ul{
	  	display: none;
	  }
	 .menu li li:hover ul{
	 	display: block;
	  	position: absolute;
	  	left: 120%;
	  	top: 0%;
	  }
	</style>
</head>
<body>
	<div class="menu">
		<ul>
			<li><a href="">One</a></li>
			<li><a href="">Tow</a></li>
			<li><a href="">Three</a></li>
			<li><a href="">Four</a>
				<ul>
					<li><a href="">Four.one</a></li>
					<li><a href="">Four.two</a></li>
					<li><a href="">Four.three</a>
						<ul>
							<li><a href="">Four.three.one</a></li>
							<li><a href="">Four.three.two</li>
							<li><a href="">Four.three.three</a></li>
							<li><a href="">Four.three.four</a></li>
						</ul>
					</li>	
					<li><a href="">Four.four</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>