Bootstrap子菜单无法显示问题排查求助

我帮你排查了代码里的几个关键问题，调整后就能正常显示子菜单了：

1. 修复HTML结构错误 #

你的导航菜单缺少了.navbar-nav核心容器，Bootstrap的导航项必须放在这个容器内才能继承正确的样式规则。修改后的完整HTML结构如下：

<!-- Menu Productos -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand pb-2" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <!-- 新增navbar-nav容器，这是Bootstrap导航的必要结构 -->
    <ul class="navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <i class="fas fa-project-diagram"></i> Productos <b class="caret"></b>
        </a>
        <ul class="dropdown-menu dropdown-menu--dark">
          <li>
            <a class="dropdown-item" [routerLink]='["/ConsoProductos"]'>
              <i class="fa fa-align-left" aria-hidden="true"></i> Consolidado
            </a>
          </li>
          <!-- 修正类名：和CSS选择器统一为dropdown-submenu -->
          <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#"> Registro de Productos </a>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item" [routerLink]='["/ruta1"]'> Generación Nuevo Conocimiento </a>
              </li>
              <li>
                <a class="dropdown-item" [routerLink]='["/ruta2"]'> Desarrollo Tecnológico e Innovación </a>
              </li>
              <li>
                <a class="dropdown-item" [routerLink]='["/ruta3"]'>
                  <i class="fa fa-align-left" aria-hidden="true"></i> Apropiación Social del Conocimiento
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <!-- Fin Menu productos -->
  </div>
</nav>

关键调整说明：

• 把孤立的<li class="dropdown">包裹进了<ul class="navbar-nav">
• 子菜单父项的类名从dropdown-submenu--dark改为dropdown-submenu（和你的CSS选择器保持一致）
• 子菜单的toggle链接暂时去掉了[routerLink]，避免点击直接跳转导致无法触发子菜单显示；如果需要跳转功能，后续可以通过JS阻止事件冒泡实现

2. 完善CSS样式 #

你的CSS缺少了子菜单箭头的默认样式，同时可以优化hover触发逻辑，调整后的完整CSS如下：

/* 基础多级菜单定位 */
.navbar-nav .dropdown-submenu {
  position: relative;
}

.navbar-nav .dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  display: none; /* 强制默认隐藏子菜单 */
}

/* hover时显示对应层级的菜单 */
.navbar-nav .dropdown:hover > .dropdown-menu,
.navbar-nav .dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* 子菜单的箭头改为向右（区分于一级菜单的向下箭头） */
.navbar-nav .dropdown-submenu > .dropdown-toggle::after {
  border-top: .3em solid transparent;
  border-right: 0;
  border-bottom: .3em solid transparent;
  border-left: .3em solid;
  margin-left: .255em;
}

/* hover时旋转子菜单箭头 */
.navbar-nav .dropdown-submenu > .dropdown-toggle:hover::after {
  transform: rotate(90deg);
}

/* 菜单链接hover下划线样式 */
.dropdown-menu>li>a:hover:after {
  text-decoration: underline;
}

3. 处理JS交互冲突（可选） #

Bootstrap 4的下拉菜单默认是点击触发，如果想用hover触发同时保留点击交互，可添加一段JS阻止事件冒泡，避免点击子菜单时父菜单意外收起：

$('.dropdown-submenu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');
  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass('show');
  });
  return false;
});

完成以上调整后，你的多级子菜单应该就能正常显示和交互了。

内容的提问来源于stack exchange，提问作者ger