Bootstrap dropdown on hover

Issue

I have a project in Angular the problem is with bootstrap 5 dropdown, I want to show the dropdown menu at the middle of the navbar when hover, the problem is that I'm using .show class to make it appear in the middle but this class only appears when you click the dropdown, If I don't click and only hover, the dropdown menu is displaying normally at the bottom of the li. Here are some images to show you what i want.

This is how it look when I hover

And this is how it look If I click the dropdown, notice that class show appears when I do this

So what I need is to make the dropdown work on hover as it work on click because this class is making the dropdown menu display at the middle, here is the stackblitz code, I don't know why the dropdown is not morking on click but I just need to make it work with hover, also I leave you my code below:

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">Temas</a>
        <div class="dropdown-menu" aria-labelledby="drop">
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</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;
}

Solution

Ok, so after a lot of reading boostrap docs, seeing what changes on the code when I click de dropdown and Jquery coding I make it work, this is what I did:

So first I notice that when you click the dropdown this change in the html:

1. The a element that is inside the li with class dropdown has the class show and the aria-expanded is changed to true.
2. The div with class dropdown-menu that is also indise the li with class dropdown has the class shown and the attribute data-bs-popper = none is added.

So with this in mind I made 2 functions to get the class dropdown and watch when the mouse hover this element, so when the mouse enter I add the classes and the attribute, when the mouse leaves I remove the classes and attribute, and this is what it looks like:

$('.dropdown').on("mouseenter", () => {
    $(".dropdown > a").addClass('show')
    $(".dropdown > a").attr("aria-expanded","true");
    $(".dropdown > div").attr("data-bs-popper","none");
    $(".dropdown > div").addClass('show')
  })

$('.dropdown').on("mouseleave", () => {
    $(".dropdown > a").removeClass('show')
    $(".dropdown > a").attr("aria-expanded","false");
    $(".dropdown > div").removeAttr("data-bs-popper","none");
    $(".dropdown > div").removeClass('show')
  })

As you can see I use the class dropdown and select the a and div elements that are inside this li and add or remove the classes and attribute, this is the simple code:

<li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" id="drop" role="button" data-bs-toggle="dropdown" aria-expanded="false">Temas</a>
     <div class="dropdown-menu" aria-labelledby="drop">
           <a class="dropdown-item" href="../default/">Default</a>
           <a class="dropdown-item" href="../united/">United</a>
           <a class="dropdown-item" href="../yeti/">Yeti</a>
     </div>
</li>

And finally in the CSS I add margin-top: -1vh so the dropdown menu is open when the mouse moves to the element, so the final css is this:

.dropdown:hover .dropdown-menu {
  display: flex;
  flex-wrap: wrap;
}

.dropdown-menu.show {
  margin-top: -1vh;
  width: 40%;
  margin-left: 38vw;
}

.dropdown-item {
  width: 25% !important;
}

Answered By - Chris