答案：通过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就能做出稳定可用的下拉导航。
暂无评论