答案是使用CSS的:hover伪类和display属性可实现下拉菜单。通过HTML无序列表构建导航结构，用position:relative与position:absolute配合定位子菜单，默认用display:none隐藏，hover时设display:block显示，再结合opacity、visibility和transition可实现平滑淡入淡出效果，关键在于正确设置层级与定位。
在 CSS 中制作导航菜单的下拉效果，主要通过 :hover 伪类配合 display 属性来控制子菜单的显示与隐藏。不需要 JavaScript 也能实现基础的下拉菜单。
1. 基本 HTML 结构
使用无序列表构建导航结构，包含主菜单项和嵌套的子菜单：
2. 基础 CSS 样式
先设置导航的基本样式，并隐藏子菜单：
.navbar { list-style: none; padding: 0; margin: 0; display: flex; }.navbar a { display: block; padding: 10px 15px; text-decoration: none; color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333; background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bf4f4f4; }
.dropdown { position: relative; }
.submenu { list-style: none; padding: 0; margin: 0; position: absolute; top: 100%; left: 0; width: 150px; background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff; border: 1px solid https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bccc; display: none; / 默认隐藏 / }
.submenu li a { padding: 8px 10px; }
3. 添加悬停显示效果
当鼠标悬停在父菜单上时，显示子菜单：
立即学习“前端免费学习笔记（深入）”；
临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自
这样就实现了简单的下拉菜单。关键点是：
- position: relative 在父级（.dropdown）上，确保子菜单能相对于它定位
- position: absolute 让子菜单脱离文档流并定位在父元素下方
- display: none / block 控制子菜单的显示与隐藏
- :hover 触发显示状态
4. 可选增强效果（淡入淡出）
用 opacity 和 transition 实现更平滑的动画：
.submenu { ... opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }.dropdown:hover .submenu { display: block; opacity: 1; visibility: visible; }
注意：结合 visibility 可避免鼠标快速移出时无法点击的问题。
基本上就这些，不复杂但容易忽略定位和层级问题。
