ASP.NET MVC递归生成菜单添加Bootstrap多级下拉样式

直接按以下步骤改造现有代码，完全基于Bootstrap原生能力实现和示例一致的美观下拉效果，不需要额外引入第三方插件。

1. 修改Razor递归模板，匹配Bootstrap组件结构 #

替换原有视图中的菜单代码，将自定义的parent/child类和Bootstrap下拉组件的标准类做映射适配：

<!-- 外层菜单如果放在导航栏中可保留navbar-nav类，放在其他容器可自行调整外层样式 -->
<ul id="menu" class="navbar-nav">
    @ShowTree(Model)
</ul>

@helper ShowTree(List<Category> categories, bool isChild = false)
{
    foreach (var item in categories)
    {
        var hasChildren = item.Children.Any();
        <li class="@(hasChildren ? (isChild ? "dropdown-submenu" : "nav-item dropdown") : (isChild ? "" : "nav-item"))">
            @if (hasChildren)
            {
                <a href="#" class="@(isChild ? "dropdown-item dropdown-toggle" : "nav-link dropdown-toggle")" 
                   data-bs-toggle="dropdown" 
                   aria-expanded="false">
                    @item.Name
                </a>
                <ul class="dropdown-menu">
                    @ShowTree(item.Children, isChild: true)
                </ul>
            }
            else
            {
                @Html.ActionLink(item.Name, "", "", null, new { @class = isChild ? "dropdown-item" : "nav-link" })
            }
        </li>
    }
}

说明：代码默认基于Bootstrap 5版本实现，如果是Bootstrap 3/4版本只需要调整对应类名即可，逻辑完全通用。

2. 补充自定义CSS，适配多级子菜单定位 #

Bootstrap原生只提供一级下拉能力，添加以下样式即可支持二级及以上子菜单从父项右侧弹出，和示例效果一致：

/* 多级子菜单定位 */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    border-radius: 0.25rem;
}
/* 可选：实现鼠标悬停自动展开，不需要点击触发 */
@media (min-width: 992px) {
    .dropdown:hover > .dropdown-menu,
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
    .dropdown > .dropdown-toggle:active {
        pointer-events: none;
    }
}

添加完以上代码后，菜单会自动继承Bootstrap的全局样式：包括悬停高亮、阴影、圆角、间距都和原生组件保持统一，不需要额外写样式美化。

3. 交互调整 #

如果需要点击触发下拉而不是悬停触发，把上面CSS中悬停展开的代码段删掉即可，Bootstrap原生的JS会自动处理点击展开/收起的逻辑，不需要额外写JS代码。

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