Bootstrap 5嵌套下拉子菜单失效，求代码错误排查

你的代码存在几个关键问题，修改后即可正常触发子菜单：

问题1：重复的属性导致逻辑冲突 #

OVERVIEW的链接标签里重复写了两次data-bs-toggle="dropdown"，这会干扰Bootstrap的下拉触发逻辑，需删除其中一个。

问题2：未闭合的HTML标签 #

最后一个列表项标签写成了</LI，缺少闭合符号，破坏了DOM结构，需修正为</li>。

问题3：嵌套下拉的父元素类名缺失 #

嵌套下拉的父<li>需要添加dropdown类（搭配dropstart控制子菜单展开方向），才能让Bootstrap识别这是一个可触发嵌套下拉的容器。

修改后的完整代码 #

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="/dropdownmenus/contenido/5.company.html" id="navbarDropdownCompany" role="button" data-bs-toggle="dropdown" aria-expanded="false">COMPANY</a>
  <ul class="dropdown-menu">
    <li class="dropdown dropstart">
      <a class="dropdown-item dropdown-toggle" href="/dropdownmenus/contenido/5.1.overview.html" id="navbarDropdownOverview" role="button" data-bs-toggle="dropdown" aria-expanded="false"> OVERVIEW </a>
      <ul class="dropdown-menu">    
        <li><a class="dropdown-item" href="/dropdownmenus/contenido/5.1.1.revenue.html">REVENUE</a></li>
        <li><a class="dropdown-item" href="/dropdownmenus/contenido/5.1.2.subscribers.html">SUBSCRIBERS</a></li>
      </ul>
    </li>
  </ul>
</li>

额外补充 #

• 确保已正确引入Bootstrap 5的CSS和JS文件（下拉功能依赖Popper.js，需同步引入）
• 若需要鼠标悬停触发下拉，需添加自定义CSS（Bootstrap 5默认是点击触发）：

.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown.dropstart:hover .dropdown-menu {
  display: block;
}

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