I have a problem with a multi-level menu using bootstrap 5, here I have created a multi-level menu but when I run it the menu doesn't appear sideways and instead appears directly under the previous menu, I will include a Codepen link that you can check
Code in codepen: https://codepen.io/heriirawan/pen/QWBzKPK
Here is CSS code
/*** 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 Code :
<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>
You need to use relative positioning, and then position the menus using top, left, right, etc.. as desired.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* 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;
}
</style>
<body>
<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>Demo Bootstrap 5.2.3
Demo Bootstrap 5.3.0