答案是使用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. 添加悬停显示效果
当鼠标悬停在父菜单上时，显示子菜单：
立即学习“前端免费学习笔记（深入）”；
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 .dropdown:hover .submenu { display: block; /* 鼠标经过时显示下拉菜单 */}
这样就实现了简单的下拉菜单。关键点是：
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 可避免鼠标快速移出时无法点击的问题。
基本上就这些，不复杂但容易忽略定位和层级问题。
以上就是在css中如何制作导航菜单下拉效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1007762.html
微信扫一扫 
支付宝扫一扫 
