Higlight opened dropdown menu on bootstrap 5 navbar-CodePudding

Bootstrap 5 navbar is used to create dropdown menu.

How to hightlight current menu item above opened dropdown like is windows desktop application so that user can see menu item where opened dropdown belongs.

Bootstrap 5 does not provide any highlight:

How to make Dropdown2 background lighter or darker or provide other indication if its drowndown is opened ?

Navbar

<nav >
  <div >
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown1
          </a>
          <ul  aria-labelledby="navbarDropdown">
            <li><a  href="#"><u>A</u>ction</a></li>
            <li><a  href="#">A<u>n</u>other action</a></li>
            <li><hr ></li>
            <li><a  href="#"><u>S</u>omething else here</a></li>
          </ul>
        </li>
        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown2
          </a>
          <ul  aria-labelledby="navbarDropdown">
            <li><a  href="#"><u>A</u>ction</a></li>
            <li><a  href="#">A<u>n</u>other action</a></li>
            <li><hr ></li>
            <li><a  href="#"><u>S</u>omething else here</a></li>
          </ul>
        </li>
        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown3
          </a>
          <ul  aria-labelledby="navbarDropdown">
            <li><a  href="#"><u>A</u>ction</a></li>
            <li><a  href="#">A<u>n</u>other action</a></li>
            <li><hr ></li>
            <li><a  href="#"><u>S</u>omething else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Testcase is in https://www.codeply.com/p/2U6C3qPw2x

Bootstrap 5, ASP.NET 6 MVC are used. Latest Jquery is also installed.

CodePudding user response：

When clicked on dropdown is adding a .show class automaticaly, you can use this selector and define a style:

.nav-link.dropdown-toggle.show{
    background:orange;
}

show result