bootstrap 4纯css实现多级下拉菜单的核心是修复默认禁用的层级显示逻辑：需用.dropdown-item:hover > .dropdown-menu等正确选择器触发显示，设position: relative于父项、position: absolute; top: 0; left: 100%于子菜单，并确保css在bootstrap官方样式后加载，且z-index合理。
纯 CSS 实现 Bootstrap 4 多级下拉菜单，核心不是“加功能”，而是修复默认被禁用的层级显示逻辑——.dropdown-menu 默认 display: none，且二级菜单没有触发源，不写对选择器就根本不会出现。
为什么 .dropdown-menu:hover .dropdown-menu 不生效
这是最常复制粘贴却失效的写法。问题在于：.dropdown-menu 本身不会持续处于 :hover 状态（尤其在移入子项间隙时会丢失），且它不是触发源；真正需要监听的是父级 .dropdown-item 的悬停态。
- 错误路径：
.dropdown-menu:hover .dropdown-menu—— 子菜单还没展开，哪来的 hover？ - 正确路径：
.dropdown-item:hover > .dropdown-menu或.dropdown-item:hover + .dropdown-menu，取决于 HTML 中子菜单是子元素还是兄弟元素 - 必须确保父级
.dropdown-item设了position: relative，否则left: 100%会相对 body 定位，飘到屏幕左侧外
二级菜单定位必须手动写死 top 和 left
Bootstrap 4 的 .dropdown-menu 默认只处理一级定位（靠 Popper.js 动态计算），多级完全不接管。CSS 必须显式声明位置，否则子菜单会叠在父菜单下方或原地塌缩。
- 二级菜单要加：
position: absolute; top: 0; left: 100% - 如果想让三级菜单向左展开（避免溢出右侧视口），可改用
right: 100%，但前提是父容器也设position: relative - 别依赖
.dropdown-menu-right类——它只影响一级菜单的水平对齐，对嵌套无效
移动端点击失效不是 bug，是 CSS 的天然限制
:hover 在 iOS 和 Android 上仅模拟一次、不冒泡、不支持嵌套触发。你在桌面调得再完美，手机点开一级后，二级永远点不出来。
- 纯 CSS 多级菜单在触摸设备上等同于“不可用”——这不是你代码写错了，是规范如此
- 若需兼容移动端，必须用 JS 切换
show类，并监听click事件（注意：Bootstrap 4 的Dropdown插件原生不支持多级，得自己增强） - 临时规避方案：给
.dropdown-item:has(.dropdown-menu)加data-bs-toggle="dropdown"并event.preventDefault()，但需确保 jQuery 和 Bootstrap JS 已正确加载
z-index 被盖住？先查父容器的 computed 值
子菜单“消失”八成不是没渲染，而是被 .navbar（z-index: 1000）、.modal（z-index: 1055）这类高权重组件盖住了。
- 打开浏览器开发者工具 → Elements → 选中父级容器 → Computed → 查
z-index - 子菜单至少要比父级高 1，例如父级是 1000，你就得设
z-index: 1001 - 禁止全局写
z-index: 9999——后续加 Toast、Tooltip、Dropdown 自身都会打架，维护成本陡增
最易被忽略的一点：所有自定义 CSS 必须放在 Bootstrap 官方 CSS 之后加载，否则 .dropdown-menu { display: none } 这条规则会被你的样式表覆盖失败，导致整个机制从第一步就卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
