Bootstrap 5多级菜单异常求助：子菜单未横向展开

问题说明 #

使用Bootstrap 5开发多级导航菜单时，二级及三级子菜单未按预期横向展开，而是直接显示在父菜单正下方，导致菜单重叠遮挡。

原因分析 #

Bootstrap默认的.dropdown-menu采用绝对定位，且默认以最近的定位父元素（.dropdown）为基准对齐，嵌套的子菜单会继承这一规则，因此会出现在父菜单正下方而非右侧。需要通过自定义CSS调整嵌套子菜单的定位逻辑。

解决方案 #

修改现有CSS，针对嵌套的多级菜单添加横向偏移样式，并调整hover触发逻辑：

/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand {
    height: 75px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: var(--dark);
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }

    /* 新增多级菜单横向展开样式 */
    .navbar .dropdown-menu .dropdown-item.dropdown-toggle {
        position: relative;
    }

    .navbar .dropdown-menu .nav-item .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: 0.125rem;
    }

    .navbar .dropdown-menu .nav-item:hover .dropdown-menu {
        top: 0;
        left: 100%;
    }
}

.navbar .btn:hover {
    color: #FFFFFF !important;
    background: var(--primary) !important;
}

关键修改点 #

• 给嵌套的.dropdown-menu设置top: 0和left: 100%，让子菜单从父菜单的右侧横向展开
• 调整hover触发时子菜单的定位参数，保持横向展开的过渡效果
• 给作为触发器的.dropdown-item.dropdown-toggle添加相对定位，确保子菜单的定位基准正确

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