导航栏下拉菜单中子菜单无法正常工作问题求助

问题描述 #

搭建的导航栏中，一级菜单「News」点击可正常展开下拉列表，但二级菜单「Bulgaria」和「International」点击后无法展开对应的子菜单，代码结构看似一致却失效。

问题原因 #

Bootstrap 5的多级下拉菜单要求子菜单的触发元素与下拉菜单容器必须包裹在同一个带有dropdown类的父元素内，同时二级触发元素所在容器需添加dropdown-submenu（或配合dropend/dropstart控制子菜单方向）。原代码直接将二级触发<a>和子菜单<div>平级放在一级下拉菜单内，不符合Bootstrap的结构要求，导致JS无法正确绑定事件。

修正后的代码 #

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container-fluid">
        <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">NewsWebsite</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink-News" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        News
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-News">
                        <!-- 二级菜单：Bulgaria -->
                        <li class="dropdown-submenu">
                            <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdownMenuLink-Bulgaria" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Bulgaria
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-Bulgaria">
                                <li><a class="dropdown-item" href="#">Dunavmost</a></li>
                                <li><a class="dropdown-item" href="#">Petel</a></li>
                            </ul>
                        </li>
                        <!-- 二级菜单：International -->
                        <li class="dropdown-submenu">
                            <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdownMenuLink-International" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                International
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-International">
                                <li><a class="dropdown-item" href="#">NY Times</a></li>
                                <li><a class="dropdown-item" href="#">DragonFire</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <partial name="_LoginPartial" />
        </div>
    </div>
</nav>

关键修改点 #

• 将一级下拉菜单的<div class="dropdown-menu">改为<ul class="dropdown-menu">，保持菜单结构语义化一致
• 给每个二级菜单的触发元素和子菜单包裹<li class="dropdown-submenu">父容器，让Bootstrap识别多级菜单层级
• 将二级子菜单的<div class="dropdown-menu">改为<ul class="dropdown-menu">，内部选项包裹在<li>中，符合列表结构规范

补充样式说明 #

Bootstrap 5默认没有dropdown-submenu的内置样式，需添加自定义CSS控制子菜单显示位置：

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

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