（自学收获）纯css网页小部件--下拉菜单

本文介绍五种使用HTML和CSS实现下拉菜单的方法，包括通过display、overflow、opacity等属性的不同设置来达到菜单的隐藏与显示效果，并探讨了这些方法对页面布局的影响。

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

虔诚地拜读了http://www.cnblogs.com/yewenxiang/p/6064117.html这位博主的内容，然后仿照他的写了这篇博客（ps：我是年龄老的未成年人，转载不算犯法）

对于导航的下拉菜单他有五种实现方法，前三种没有一个下拉条缓慢出现的过程（好吧他只有一个有那种效果）。

html的结构不同变（嵌套的两个无序列表），只需修改css的部分代码即可用不同方法来实现，但同时对下面的流内元素的影响不同。详情自己手动实验或者看↑那个人的博客（没打广告，看疗效）（pss：果然自己学的不扎实，村里人见了.nav li:hover .subnav{}这种中间子元素带着伪类的让我感到新鲜而又赤鸡很好用）

补充：自己有试着加了一个三级的导航，原理和之前的一样。所以同样可以加加加加加到一百层导航如果你愿意，可以靠position来定位你三级导航的位置。（其他的如用margin也能实现，反正都是调整位置嘛不过那个就是在流里）

二级导航效果图：

第一种：思路：靠display：none和悬停时候的display：block，来实现下拉菜单的隐藏和出现（第一个主体列表一定要用float流出来，在流内的话显示下来菜单会把主体部分顶上去不信自己试）

总体 html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单3</title>
	<link rel="stylesheet" href="sublist-5.css">
</head>
<body>
	<ul class="nav">
		<li><a href="#">菜单一</a>
			<ul class="subnav">
				<li>内容一</li>
				<li>内容二</li>
				<li>内容三</li>
			</ul>
		</li>
		<li><a href="#">菜单二</a>
			<ul class="subnav">
				<li>内容一</li>
				<li>内容二</li>
				<li>内容三</li>
			</ul>
		</li>
		<li><a href="#">菜单三</a>
			<ul class="subnav">
				<li>内容一</li>
				<li>内容二</li>
				<li>内容三</li>
			</ul>
		</li>
		<li><a href="#">菜单四</a>
			<ul class="subnav">
				<li>内容一</li>
				<li>内容二</li>
				<li>内容三</li>
			</ul>
		</li>
	</ul>

</body>
</html>

css：

* {
	padding: 0;
	margin: 0;
}
ul {
	list-style: none;
}
.nav {
	position: relative;
	left: 40%;
	top: 40px;
	width: 40%;
	height: 50px;
}
.nav > li {
	float: left;
	width: 20%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #00d;
	background-color: #aaa;
}
.nav >li:first-child {
	border-radius: 10px 0 0 10px;
}
.nav >li:last-child {
	border-radius: 0 10px 10px 0;
}
.nav li a {
	display: block;
	width: 100%;
	height: 50px;
	cursor: pointer;
}
.subnav {
	display: none;
}

.nav li:hover .subnav {
	display: block;
}
.subnav li {
	background-color: #888;
	
	transition: all 0.4s ease-in-out ;
}
.subnav li:hover {
    color: #000;
    background-color: #ddd;
}

第二种：靠overflow：hidden和overflow：visible对导航的li的显示范围限定来实现

.nav > li {
	float: left;
	width: 20%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #00d;
	background-color: #aaa;
	overflow: hidden;
}
.nav >li:first-child {
	border-radius: 10px 0 0 10px;
}
.nav >li:last-child {
	border-radius: 0 10px 10px 0;
}
.nav li a {
	display: block;
	width: 100%;
	height: 50px;
	cursor: pointer;
}
.nav > li:hover {
	overflow: visible;
}

第三种：通过透明度属性opacity：值0 和值1来实现

.subnav {
	opacity: 0;
}
.nav li:hover  .subnav{
	opacity: 1;

第四种：通过把下拉菜单的ul高度设为0（！一定要overflow：hidden来隐藏因为还有li呢）这种会有缓慢下落的效果美滋滋

.subnav {
	height: 0;
	overflow: hidden;

	transition: all .5s ease-in-out;
}
.nav li:hover .subnav {
	height: 150px;
}
.subnav li {
	height: 50px;
	background-color: #888;
	
	transition: all 0.4s ease-in-out ;
}

第五种：通过绝对定位，把下拉列表“藏”起来移到别的位置，那个作者用的是向左移，因为他只做了一个，所以效果还好，如果你都有下拉，在定位的时候，需要给每个都设置一个left的值（

应该是这样错了别怪我因为我统一设的类没细究）所以我把定位定到了头顶上嘎嘎嘎

.subnav {
	position: absolute;
	top: -999px;
	width: 20%;

}
.nav li:hover  .subnav{
	top: 50px;
}

啊嘞，是不是还有从侧面出现的下拉菜单，。。。。。又是充满遗憾的一篇博客。下回思考思考。每天练习一点，生活很滋润大兄弟。