答案：通过html列表与css的:hover伪类实现下拉菜单，关键点包括父级设position: relative、子菜单用position: absolute定位，结合opacity和visibility控制显隐，并通过transition实现淡入淡出动画效果。
在 CSS 中实现下拉菜单样式，可以通过结合 HTML 结构与 CSS 的 :hover 伪类来完成。不需要 javaScript 就能实现基本的交互效果。
HTML 结构
使用无序列表构建导航和下拉菜单结构：
<nav> <ul class="menu"> <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> </ul> </nav>
CSS 样式设置
通过以下方式控制主菜单和下拉项的显示：
/* 清除默认样式 */ .menu { list-style: none; margin: 0; padding: 0; background-color: #333; display: flex; } <p>.menu > li { position: relative; }</p><p>.menu a { display: block; color: white; text-decoration: none; padding: 12px 16px; }</p><p>.menu a:hover { background-color: #555; }</p><p>/<em> 隐藏下拉菜单 </em>/ .dropdown-menu { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; width: 200px; background-color: #444; box-shadow: 0 4px 6px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }</p><p>/<em> 悬停时显示下拉菜单 </em>/ .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; }</p><p>/<em> 下拉项样式 </em>/ .dropdown-menu li a { padding: 10px 16px; }</p><p>.dropdown-menu li a:hover { background-color: #666; }</p>
关键点说明
实现下拉菜单的关键在于：
立即学习“前端免费学习笔记（深入）”；
- position: relative 在父级
.dropdown上，确保子菜单定位基于它 - position: absolute 让下拉菜单脱离文档流并定位在父元素下方
- 使用 opacity 和 visibility 控制显隐，比
display: none/block更适合做过渡动画 - :hover 触发显示，用户鼠标移入父级时激活下拉
- 添加 transition 实现淡入淡出效果，提升用户体验
基本上就这些。不复杂但容易忽略细节，比如层级（可加 z-index）和响应式适配。