I am currently working on an Angular project and facing an issue with the Bootstrap 5 dropdown feature. I want the dropdown menu to appear in the center of the navbar when hovered over, but the problem is that the .show class only activates when the dropdown is clicked. If I hover without clicking, the dropdown menu appears at the bottom of the li. Here are some images illustrating what I am trying to achieve.
This is how it looks when hovering: https://i.sstatic.net/m6C44.png
And this is how it looks when clicked with the show class appearing:
https://i.sstatic.net/tcE2C.png
What I need is for the dropdown to function on hover like it does on click, as the show class positions the dropdown menu in the center. Here is the link to the code on StackBlitz, and below is my implementation:
HTML:
<li class="nav-item dropdown position-static me-lg-3">
<a class="nav-link dropdown-toggle" id="drop" role="button" data-bs-toggle="dropdown" aria-expanded="false">Themes</a>
<div class="dropdown-menu" aria-labelledby="drop">
<a class="dropdown-item" href="../default/">Default</a>
<a class="dropdown-item" href="../united/">United</a>
...
</div>
</li>
CSS:
.dropdown:hover .dropdown-menu {
display: flex;
flex-wrap: wrap;
}
.dropdown-menu.show {
width: 40%;
margin-left: 29vw;
}
.dropdown-item {
width: 25% !important;
}