纯css实现bootstrap4多级下拉菜单仅适用于桌面端hover场景；移动端必须用js控制show类切换，因ios/android的:hover不支持嵌套触发，且二级菜单需正确设置position:relative、top:0、left:100%及z-index:1001以上。
纯 CSS 实现 Bootstrap 4 多级下拉菜单是可行的，但只适用于桌面端 hover 场景；移动端必须放弃纯 CSS，否则子菜单根本点不开——这不是你代码写错了，是 iOS/Android 的 :hover 行为规范决定的。
为什么 .dropdown-menu:hover .dropdown-menu 永远不生效
这是最常抄错的一行 CSS。问题在于：.dropdown-menu 默认是 display: none，它本身没有 hover 状态可触发；真正需要监听的是父级 .dropdown-item 的 hover。
- 错误写法：
.dropdown-menu:hover .dropdown-menu—— 子菜单不可见时无法触发 hover - 正确路径：
.dropdown-item:hover > .dropdown-menu或.dropdown-item:hover + .dropdown-menu（取决于 HTML 中子菜单是紧跟在<a></a>后，还是嵌套在<li>内） - 必须给
.dropdown-item加position: relative，否则left: 100%会相对于 body 定位，导致二级菜单飞到屏幕右边
二级菜单定位必须显式设置 top 和 left
Bootstrap 的 .dropdown-menu 默认是 top: 100%（向下展开），但二级菜单要向右展开，top: 0 + left: 100% 是硬性要求。
-
.dropdown-menu .dropdown-menu { position: absolute; top: 0; left: 100%; margin-top: -2px; }——margin-top: -2px是为了对齐边框，避免视觉错位 - 别漏掉
position: absolute，否则left: 100%不起作用 - 如果二级菜单在
.navbar里消失，大概率是 z-index 不够：Bootstrap 的.navbar是z-index: 1000，你的二级菜单至少设成z-index: 1001
移动端点击失效不是 Bug，是规范限制
iOS 和 Android 上，:hover 只在模拟悬停（比如长按）时短暂触发一次，且不支持嵌套 hover 链。这意味着纯 CSS 的三级菜单在手机上点第一级能展开，点第二级就立刻收回去。
- 不要试图用
@media (hover: hover)做条件判断——它只能区分设备是否有 hover 能力，不能解决嵌套触发问题 - 真实方案：用 JS 控制
show类切换，监听click事件，并阻止默认跳转（e.preventDefault()） - 注意：Bootstrap 4 的原生
Dropdown插件不支持多级，data-toggle="dropdown"只对一级有效；二级菜单得自己绑定 click 逻辑
最易被忽略的点是 z-index 层级和 .dropdown-item 的 position: relative —— 这两个漏掉任何一个，二级菜单都会“消失”，但控制台里 DOM 是存在的，只是渲染位置或遮盖关系错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
