纯CSS在Bootstrap 4中仅支持桌面端hover触发多级菜单，移动端必须用JS实现；因iOS/Android的:hover不支持嵌套触发，且.dropdown-menu默认display:none不可悬停，须监听.dropdown-item:hover并配合position:relative、top:0、left:100%及足够z-index定位二级菜单。
纯 CSS 在 Bootstrap 4 中只能实现桌面端 hover 触发的多级菜单；移动端必须用 JS，这不是你写错了，是 iOS/Android 的 :hover 行为规范决定的。
为什么 .dropdown-menu:hover .dropdown-menu 永远不生效
因为 .dropdown-menu 默认是 display: none，它本身不可见、没有 hover 状态可触发。真正要监听的是父级 .dropdown-item 的悬停状态。
- 错误写法：
.dropdown-menu:hover .dropdown-menu - 正确路径：
.dropdown-item:hover > .dropdown-menu（子菜单嵌套在.dropdown-item内）或.dropdown-item:hover + .dropdown-menu（子菜单紧跟在后） - 必须给
.dropdown-item加position: relative，否则left: 100%会相对于 body 定位，二级菜单直接飞到屏幕右边
.dropdown-item:hover > .dropdown-menu 的定位和层级要求
二级菜单不是“加了就出来”，它需要显式覆盖 Bootstrap 默认的展开方向和层叠上下文。
- 必须设
position: absolute，否则left: 100%不起作用 - 必须设
top: 0; left: 100%，不能依赖默认的top: 100%（那是向下展开） -
.navbar默认z-index: 1000，你的二级菜单至少设z-index: 1001 - 若父级用了
transform（比如.navbar-collapse动画），会创建新层叠上下文，得把二级菜单提升到同级容器中再设z-index
移动端点击失效不是 Bug，是规范限制
iOS 和 Android 上的 :hover 仅在长按模拟悬停时短暂触发一次，且不支持「悬停 A → 显示 B → 悬停 B → 显示 C」这种链式行为。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 的三级菜单在手机上点开一级后，点二级就立刻收起
-
@media (hover: hover)只能判断设备是否支持 hover，不能解决嵌套触发问题 - 真实方案：用 JS 控制
show类切换，监听click事件，并调用e.preventDefault()阻止默认跳转 - Bootstrap 4 原生
data-toggle="dropdown"只对一级有效，二级菜单需手动绑定 click 逻辑
最易被忽略的两个点：一是 .dropdown-item 缺少 position: relative，二是二级菜单没设足够高的 z-index——这两个一漏，菜单就“消失”，但开发者工具里 DOM 是存在的，只是渲染位置或层级错了。
