Bootstrap 5下拉菜单中子菜单创建及显示异常求助

你的问题源于HTML结构不规范和CSS逻辑错误，以下是具体修复方案：

一、修正HTML结构 #

原代码里把子菜单直接嵌套在dropdown-item的<a>标签内，违反了Bootstrap下拉菜单的层级规则，同时重复使用submenu和dropend类导致样式冲突。正确的结构应该给带有子菜单的项单独设置dropdown容器，用dropend实现向右展开的子菜单：

<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top py-0 pe-5">
    <a href="#" class="navbar-brand ps-5 me-0">
        <img src="/img/airboxlogo.png" width="170px" height="45px">
    </a>
    <button type="button" class="navbar-toggler me-0" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav ms-auto p-4 p-lg-0">
            <a href="" class="nav-item nav-link active">Home</a>
            <div class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Products</a>
                <div class="dropdown-menu bg-light m-0">
                    <!-- 带二级子菜单的项 -->
                    <div class="dropdown dropend">
                        <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Main Product 1</a>
                        <div class="dropdown-menu bg-light">
                            <a href="#" class="dropdown-item">Sub Product 1</a>
                            <a href="#" class="dropdown-item">Sub product 2</a>
                        </div>
                    </div>
                    <a href="#" class="dropdown-item">Main product 2</a>
                    <a href="#" class="dropdown-item">Main product 3</a>
                    <a href="#" class="dropdown-item">Main product 3</a>
                    <a href="#" class="dropdown-item">Main product 4</a>
                </div>
            </div>
            <a href="#" class="nav-item nav-link">About </a>
            <a href="#" class="nav-item nav-link">Services</a>
            <a href="#" class="nav-item nav-link">Contact us</a>
        </div>
        <a href="#" class="btn btn-primary px-3 d-none d-lg-block">Download Catalogue</a>
    </div>
</nav>

二、调整CSS样式 #

原CSS选择器错误，且直接用display:none会导致hover无法触发（元素不可见时无法捕获鼠标事件）。下面是适配hover触发子菜单的样式，同时保证子菜单向右展开：

/* 默认隐藏二级子菜单 */
.dropdown.dropend .dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -1px;
}

/* 父项hover时显示子菜单 */
.dropdown.dropend:hover .dropdown-menu {
    display: block;
}

/* 可选：给子菜单加平滑过渡效果 */
.dropdown.dropend .dropdown-menu {
    transition: opacity 0.2s ease, visibility 0.2s ease;
    opacity: 0;
    visibility: hidden;
}

.dropdown.dropend:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

关键说明 #

1. 结构修正：把带二级菜单的项从<a>改成<div class="dropdown dropend">，内部包含触发用的<a>和子菜单<div class="dropdown-menu">，符合Bootstrap组件的层级要求。
2. CSS逻辑：通过父容器的hover事件触发子菜单显示，用position:absolute让子菜单对齐到父项右侧；用opacity+visibility替代单纯的display:none，既实现平滑过渡，又保证hover事件能正常触发。

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