用 position: absolute 配合 :hover 实现下拉菜单，需父项设 position: relative 作为定位基准，子菜单设 position: absolute、top: 100%、left: 0、display: none 及 z-index；通过 .menu-item:hover .submenu { display: block; } 触发显示，并可加 opacity 和 transform 过渡提升体验。
用 position: absolute 配合 :hover 实现下拉菜单，核心是让子菜单默认隐藏、悬停父项时显示，并精准定位在父菜单下方。关键在于层级关系、定位基准和显示控制。
父容器需设为 relative 定位
绝对定位的子元素（下拉菜单）会相对于最近的 已定位祖先元素（即 position 为 relative、absolute 或 fixed 的父级）进行定位。若不设置，它可能相对于 body 偏移，导致位置错乱。
- 给导航项（如
<li class="menu-item">）添加position: relative - 这样内部的
.submenu就能以该li为参考点垂直向下展开
子菜单用 absolute 定位并初始隐藏
下拉菜单本身要脱离文档流、精确贴靠父项底部，同时默认不可见。
- 设置
position: absolute、top: 100%（紧贴父项下边缘）、left: 0 - 用
display: none或visibility: hidden隐藏（推荐display: none，更彻底且不影响布局） - 加
z-index确保浮在其他内容上方（如z-index: 100）
通过 hover 触发显示
不是直接 hover 子菜单，而是 hover 父级菜单项时，显示其内部的子菜单 —— 利用 CSS 后代选择器或子选择器。
立即学习“前端免费学习笔记（深入）”；
- 写法：
.menu-item:hover .submenu { display: block; } - 确保 HTML 结构是嵌套的，例如：
<li class="menu-item">产品<ul class="submenu">...</ul> </li> - 如果用
visibility，对应改为visibility: visible，但注意它仍占空间
增强体验的小细节
纯 hover 菜单容易误触或关闭过快，可稍作优化：
- 给
.submenu加opacity: 0; transition: opacity 0.2s, transform 0.2s; - hover 时设
opacity: 1; transform: translateY(0);，并配合transform: translateY(-5px)初始状态实现轻微入场感 - 避免子菜单和父项之间有空隙（比如 margin），否则鼠标移出时菜单会闪退 —— 可用
margin-top: -1px微调衔接
