纯 css 在 bootstrap 4 中只能实现桌面端 hover 触发的多级菜单；移动端必须用 js，否则二级菜单点开即收——这不是你代码写错了，是 ios/android 的 :hover 行为规范决定的。
纯 CSS 在 Bootstrap 4 中只能实现桌面端 hover 触发的多级菜单；移动端必须用 JS，否则二级菜单点开即收——这不是你代码写错了，是 iOS/Android 的 :hover 行为规范决定的。
为什么 .dropdown-menu:hover .dropdown-menu 永远不生效
因为 .dropdown-menu 默认是 display: none，它自身不可见、无尺寸、无法被鼠标悬停。真正要监听的是父级 .dropdown-item 的 hover 状态。
- 错误写法：
.dropdown-menu:hover .dropdown-menu—— 子菜单还没显示，根本触不到 hover - 正确路径：
.dropdown-item:hover > .dropdown-menu（子菜单直接嵌套在.dropdown-item内）或.dropdown-item:hover + .dropdown-menu（子菜单紧跟在后） - 必须给
.dropdown-item加position: relative，否则left: 100%会相对于 body 定位，导致二级菜单飞到屏幕最右边
二级菜单定位必须显式设置 top 和 left
Bootstrap 默认的 .dropdown-menu 是向下展开（top: 100%），但二级菜单要向右展开，这是硬性要求：
-
position: absolute必须加，否则left: 100%不起作用 -
top: 0+left: 100%是唯一能贴着一级菜单右侧展开的方式 - 漏掉任意一项，二级菜单要么消失、要么错位
移动端点击失效？不是 Bug，是规范限制
iOS 和 Android 上的 :hover 仅在长按模拟悬停时短暂触发一次，且不支持嵌套触发链。这意味着：
- 点第一级能展开，点第二级就立刻收回去 —— 纯 CSS 无解
-
@media (hover: hover)只能判断设备是否有 hover 能力，不能绕过嵌套限制 - 真实方案：用 JS 控制
show类切换，监听click事件，并调用e.preventDefault()阻止默认跳转 - 注意：
data-toggle="dropdown"在 Bootstrap 4 中只对一级有效，二级菜单需手动绑定 click 逻辑
z-index 和 position: relative 最易被忽略，但一漏就“消失”
二级菜单 DOM 存在，但渲染不出来？大概率是这两个问题：
-
.navbar的z-index是 1000，你的二级菜单至少得设z-index: 1001 - 如果父容器用了
transform（比如.navbar-collapse动画），会创建新层叠上下文，此时子菜单的z-index只在该上下文内生效，必须把z-index提到同级或更高层 -
.dropdown-item没加position: relative→left: 100%失效 → 二级菜单位置完全错误
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
