纯 css :hover 实现多级下拉菜单可行，但需满足 dom 嵌套正确、css 定位无缝、选择器用后代而非子代三个硬性条件，否则必现闪退、失效或无障碍问题。
纯 CSS :hover 实现多级下拉菜单是可行的，但必须满足三个硬性条件：DOM 嵌套结构正确、CSS 定位无间隙、选择器不写死层级；否则鼠标一移就收、子菜单不展开、移动端完全失效都是必然结果。
HTML 必须用嵌套 <ul></ul> 结构，不能用 <div> 堆砌
<p>浏览器和屏幕阅读器依赖语义化树形结构识别父子关系。错误写法如把子菜单放在父 <code><li> 外面，或用 <div class="dropdown-menu"> 包裹，会导致键盘导航跳过、<code>:hover 无法穿透、ARIA 属性失效。
- 一级菜单项是
<nav><ul><li><a>Home</a></li></ul></nav>
- 二级菜单必须是该
<li> 的直接子元素：<li class="has-child">
<a>Products</a><ul><li><a>Laptops</a></li></ul>
</li>
- 三级同理，继续嵌套在二级
<li> 内部，不能平级或外置
- 为可展开项加
class="has-child"（或用 :has(ul)，但需考虑兼容性）
:hover 选择器必须用后代选择器 ，不能用子代选择器 >
<nav><ul><li><a>Home</a></li></ul></nav>
<li> 的直接子元素：<li class="has-child">
<a>Products</a><ul><li><a>Laptops</a></li></ul>
</li>
<li> 内部，不能平级或外置class="has-child"（或用 :has(ul)，但需考虑兼容性）:hover 选择器必须用后代选择器 ，不能用子代选择器 >
写成 li:hover > ul 只能触发一级到二级，二级里的 <li> 悬停时根本不会匹配到三级 <ul></ul> —— 因为三级 <ul></ul> 不是一级 <li> 的直接子元素。
- 正确写法是
li:hover ul（空格），它会匹配任意深度的后代<ul></ul> - 初始隐藏所有下拉菜单：
ul ul { display: none; } - 悬停任意
<li>时，其内部所有<ul></ul>都显示：li:hover ul { display: block; } - 若要限制只展开下一层，可用
li:hover > ul，但必须配合每层单独控制逻辑，不推荐用于多级
定位必须无缝衔接，避免 hover 中断
鼠标从一级菜单项移到二级菜单途中如果离开触发区域，:hover 立即失效，菜单闪退。这不是 bug，是 CSS 行为本身。
- 父
<li>必须设position: relative（Bootstrap 默认有，自定义需手动加） - 子
<ul></ul>用position: absolute; top: 100%; left: 0;，不能靠margin-top拉开 - 确保视觉上无物理间隙：二级菜单顶部必须紧贴一级菜单项底部，不留白边或 border 间隔
- 父容器不能有
overflow: hidden或overflow: scroll，否则子菜单被裁剪 - 推荐用
opacity: 0; visibility: hidden;替代display: none，便于加transition
移动端和可访问性问题无法靠 :hover 解决
手机和平板没有 hover 状态，:hover 规则在 touch 设备上基本不触发（iOS Safari 仅在第一次点击后模拟一次，不可靠）。同时，键盘用户无法用 Tab 进入子菜单。
- 不要试图用
@media (hover: hover)来“修复”移动端 —— 它无法解决焦点管理与 ARIA 状态同步问题 - 真实项目中，必须搭配 JS：小屏下监听
click或focus，切换aria-expanded和aria-hidden - 每个可展开项加
aria-haspopup="menu" aria-expanded="false"，子菜单加role="menu" aria-labelledby - 隐藏子菜单时用
visibility: hidden; aria-hidden="true"，而非单纯display: none
最易被忽略的一点：Bootstrap 5 的 data-bs-toggle="dropdown" 会接管全部交互逻辑，只要它存在，你写的 .dropdown-item:hover + .dropdown-menu 就完全无效 —— 必须移除该属性，或彻底弃用 Bootstrap Dropdown 组件结构。
