答案是使用CSS的:hover伪类和display属性可实现下拉菜单。通过HTML无序列表构建导航结构，用position:relative与position:absolute配合定位子菜单，默认用display:none隐藏，hover时设display:block显示，再结合opacity、visibility和transition可实现平滑淡入淡出效果，关键在于正确设置层级与定位。
在 CSS 中制作导航菜单的下拉效果，主要通过 :hover 伪类配合 display 属性来控制子菜单的显示与隐藏。不需要 JavaScript 也能实现基础的下拉菜单。
使用无序列表构建导航结构，包含主菜单项和嵌套的子菜单：
先设置导航的基本样式，并隐藏子菜单：
.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; }
当鼠标悬停在父菜单上时，显示子菜单：
立即学习“前端免费学习笔记（深入）”；
.dropdown:hover .submenu { display: block; /* 鼠标经过时显示下拉菜单 */ }这样就实现了简单的下拉菜单。关键点是：
用 opacity 和 transition 实现更平滑的动画：
.submenu { ... opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }.dropdown:hover .submenu { display: block; opacity: 1; visibility: visible; }
注意：结合 visibility 可避免鼠标快速移出时无法点击的问题。
基本上就这些，不复杂但容易忽略定位和层级问题。
以上就是在css中如何制作导航菜单下拉效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
845
收藏
