如何在Bootstrap导航栏中利用CSS实现无限层级的多级菜单？-css教程-PHP中文网

bootstrap 5 默认不支持三级及以上下拉菜单，因其主动移除多级js初始化与css支持，第三级菜单始终display: none且无hover/click响应；需用visibility+opacity替代display控制显隐，并分层编写css选择器、严格设置z-index与aria属性。

如何在bootstrap导航栏中利用css实现无限层级的多级菜单？

Bootstrap 5 的多级菜单默认根本不会渲染

直接写三层 <ul class="dropdown-menu"></ul> 嵌套，第三级菜单在 DOM 中存在但始终 display: none，且无任何 hover 或 click 响应。这不是你 HTML 写错了，是 Bootstrap 5 主动移除了对二级以上菜单的 JS 初始化和 CSS 支持——它只给第一层 .dropdown 绑定实例，子级 .dropdown-menu .dropdown 完全被忽略。

纯 CSS 实现必须绕过 display: none

所有嵌套菜单必须始终保留在渲染流中，否则鼠标路径中断、悬停闪退不可避免。关键不是“让子菜单显示”，而是“不让它退出布局流”：

.dropdown-menu 必须设为 display: block !important，禁用默认的 display: none
改用 visibility: hidden + opacity: 0 控制显隐，配合 transition 实现淡入
每一级子菜单需独立定位：.dropdown-menu .dropdown-menu 要设 position: absolute; top: 0; left: 100%（横向展开）或 top: 100%; left: 0（纵向）
消除悬停断连：在父级 .dropdown 和子级 .dropdown-menu 之间加 margin-top: -1px 或 margin-left: -1px，填掉 border 或间隙

hover 触发链必须逐层显式声明

浏览器不支持无限递归选择器，.dropdown:hover .dropdown-menu .dropdown:hover .dropdown-menu 这种写法不可靠，也难以维护。正确做法是分层覆盖：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

一级触发：.dropdown:hover > .dropdown-menu
二级触发：.dropdown-menu .dropdown:hover > .dropdown-menu
三级触发：.dropdown-menu .dropdown-menu .dropdown:hover > .dropdown-menu
每级都要单独写，不能偷懒用通配符；否则某一层失效，整条链就断了

示例片段：

.dropdown:hover > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.dropdown-menu .dropdown:hover > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  visibility: visible;
  opacity: 1;
}