纯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 中能实现桌面端多级下拉菜单，但移动端必须用 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 定位，二级菜单直接飞到屏幕右边
二级菜单定位必须显式设置 top 和 left
Bootstrap 默认的 .dropdown-menu 是向下展开（top: 100%），但二级菜单要向右展开，必须覆盖这两个值。
- 二级菜单需设
top: 0; left: 100%，且position: absolute（否则left: 100%不起作用） - 若父级用了
transform（比如.navbar-collapse动画），会创建新层叠上下文，此时z-index只在该上下文内生效，得把二级菜单提升到同级容器中再设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 逻辑
z-index 层级和 position:relative 最易被忽略
二级菜单 DOM 存在但“看不见”，90% 是这两个问题之一：
-
.navbar默认z-index: 1000，你的二级菜单至少设z-index: 1001 - 若父级是
.modal（z-index: 1055）或.card（可能含overflow: hidden），子菜单会被裁剪或遮盖 - 别全局设
z-index: 9999——后续加.toast或.tooltip会打架
最常漏掉的是 .dropdown-item 缺少 position: relative 和二级菜单没设足够高的 z-index；这两个一漏，菜单就“消失”，但开发者工具里 DOM 是完好的——只是渲染位置错了，或者被盖住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
