html - Dropdown menu active, not the items

Question

I would like my dropdown menu to be active when i have clicked an item in it, in other words, the word Services to be active. How can i do that?

<nav class="navbar navbar-light navbar-expand-xl">
  <a class="navbar-brand" href="#"><img src="" alt=""/></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"> Home</a>
           </li>
            <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Services
                </a>
                <div class="dropdown-menu active" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#" id="active"
                    >Lala</a>
                  <a class="dropdown-item" href="#"
                    >Haha</a
                  >
                </div>
              </li>
            </ul>
          </div>
        </nav>

question from:https://stackoverflow.com/questions/65850853/dropdown-menu-active-not-the-items

Answer 1

try putting active class on your li

<!--- <li class="nav-item dropdown active">--->
 <li class="nav-item dropdown active">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Services
                </a>
                <div class="dropdown-menu active" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#" id="active"
                    >Lala</a>
                  <a class="dropdown-item" href="#"
                    >Haha</a
                  >
                </div>
              </li>