我在使用 bootstrap 5 的多级菜单时遇到问题，这里我创建了一个多级菜单，但是当我运行它时，菜单不会出现在侧面，而是直接出现在上一个菜单下，我将包括一个 Codepen您可以查看链接
codepen中的代码：https://codepen.io/heriirawan/pen/QWBzKPK
这是CSS代码
/*** 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 .btn:hover {
color: #FFFFFF !important;
background: var(--primary) !important;
}
HTML 代码：
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top p-0 px-4 px-lg-5">
<a href="index.html" class="navbar-brand d-flex align-items-center">
<h2 class="m-0 text-primary"><img class="img-fluid me-2" src="img/icon-1.png" alt="" style="width: 45px;">Navbar</h2>
</a>
<button type="button" class="navbar-toggler" 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 py-4 py-lg-0">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Service</a>
<a href="roadmap.html" class="nav-item nav-link">Roadmap</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Level 1</a>
<div class="dropdown-menu shadow-sm m-0">
<a href="feature.html" class="dropdown-item">Menu 1</a>
<a href="token.html" class="dropdown-item">Menu 2</a>
<a href="faq.html" class="dropdown-item">Menu 3</a>
<div class="nav-item dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Level 2</a>
<div class="dropdown-menu shadow-sm m-0">
<a href="feature.html" class="dropdown-item">Menu 1</a>
<a href="token.html" class="dropdown-item">Menu 2</a>
<a href="faq.html" class="dropdown-item">Menu 3</a>
<div class="nav-item dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Level 3</a>
<div class="dropdown-menu shadow-sm m-0">
<a href="feature.html" class="dropdown-item">Menu 1</a>
<a href="token.html" class="dropdown-item">Menu 2</a>
<a href="faq.html" class="dropdown-item">Menu 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<div class="h-100 d-lg-inline-flex align-items-center d-none">
<a class="btn btn-square rounded-circle bg-light text-primary me-2" href=""><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-square rounded-circle bg-light text-primary me-2" href=""><i class="fab fa-twitter"></i></a>
<a class="btn btn-square rounded-circle bg-light text-primary me-0" href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</nav>
您需要使用相对定位，然后根据需要使用
topleftright<div class="navbar-nav ms-auto py-4 py-lg-0">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link">Service</a>
<a href="roadmap.html" class="nav-item nav-link">Roadmap</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-displa="static">Level 1</a>
<div class="position-relative">
<div class="dropdown-menu shadow-sm m-0">
<a href="feature.html" class="dropdown-item">Menu 1</a>
<a href="token.html" class="dropdown-item">Menu 2</a>
<a href="faq.html" class="dropdown-item">Menu 3</a>
<div class="nav-item dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Level 2</a>
<div class="position-relative">
<div class="dropdown-menu shadow-sm m-0">
<a href="feature.html" class="dropdown-item">Menu 1</a>
<a href="token.html" class="dropdown-item">Menu 2</a>
<a href="faq.html" class="dropdown-item">Menu 3</a>
<div class="nav-item dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Level 3</a>
<div class="position-relative">
<div class="dropdown-menu shadow-sm m-0">
<a href="feature.html" class="dropdown-item">Menu 1</a>
<a href="token.html" class="dropdown-item">Menu 2</a>
<a href="faq.html" class="dropdown-item">Menu 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
CSS
/* top level */
.navbar-nav > .dropdown:hover > .position-relative > .dropdown-menu {
top: 0;
right: 0;
}
/* sub levels */
.navbar-nav .position-relative .position-relative .dropdown-menu {
top: 10px;
right: 50%;
margin-top: -1px;
}
.navbar-nav > .dropdown > .position-relative > .dropdown-menu,
.navbar-nav .position-relative .dropdown > .position-relative > .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: .5s;
}
.navbar-nav > .dropdown:hover > .position-relative > .dropdown-menu,
.navbar-nav .position-relative .dropdown:hover > .position-relative > .dropdown-menu {
opacity: 1;
visibility: visible;
transition: .5s;
}
演示 Bootstrap 5.2.3
演示 Bootstrap 5.3.0