答案：通过HTML列表结构与CSS的:hover伪类实现下拉菜单，关键在于父级相对定位、子菜单绝对定位及display属性控制显隐。利用position: relative与top: 100%确保下拉层正确显示，结合z-index提升层级，去除默认样式保持美观，可选opacity与visibility过渡增强动画效果，实现简洁流畅的纯CSS导航下拉功能。
用CSS制作导航栏下拉子菜单，关键在于利用 :hover 伪类控制子菜单的显示与隐藏。下面是一个简洁实用的实现方式。
HTML结构
先构建基础的导航结构，使用无序列表：
<nav><ul class="navbar">
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">产品</a>
<ul class="dropdown-menu">
<li><a href="#">电子产品</a></li>
<li><a href="#">服装服饰</a></li>
<li><a href="#">家居用品</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul></nav>
CSS样式设置
设置主菜单横向排列，并隐藏子菜单：
.navbar {
list-style: none;
margin: 0;
padding: 0;
background: #333;
overflow: hidden;
}
.navbar > li {
float: left;
position: relative;
}
.navbar a {
display: block;
color: white;
text-decoration: none;
padding: 14px 20px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
left: 0;
background: #444;
min-width: 160px;
display: none;
z-index: 1;
}
.dropdown-menu li a {
padding: 12px 16px;
}
.dropdown-menu li a:hover {
background: #555;
}
关键点说明
几个需要注意的地方：
- position: relative 在父级 .dropdown 上，确保子菜单能相对于它定位
- top: 100% 让子菜单紧贴在主菜单下方
- display: none / block 控制下拉菜单的显示隐藏
- z-index: 1 确保下拉菜单在其他内容之上
- 移除默认的 list-style 和 margin/padding，保持整洁外观
增强体验（可选）
可以添加过渡动画让下拉更自然：
.dropdown-menu {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
}
这样下拉时会有淡入效果，视觉更流畅。
基本上就这些，不复杂但容易忽略细节。只要结构清晰、定位正确，纯CSS就能做出稳定可用的下拉导航。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
