My Angular8 application has a navigation bar with 3 dropdown options: Agent, Prospect, and Competitor. When I click on Agents, it does not get highlighted. I want any dropdown option I select to remain highlighted unless I manually choose another option.
HTML:
<li>
<a data-toggle="collapse" href="#collapseExample" class="d-flex align-items-center">
<i class="fas fa-bullhorn"></i>
<span class="d-flex flex-grow-1">Marketing</span>
</a>
<div class="collapse list-group show" id="collapseExample">
<a href="javascript:void(0)" class="d-flex align-items-center list-group-item list-group-item-action">
<i class="fas fa-users"></i>
<span class="d-flex flex-grow-1">Agents</span>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center list-group-item list-group-item-action">
<i class="fas fa-users"></i>
<span class="d-flex flex-grow-1">Prospects</span>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center list-group-item list-group-item-action">
<i class="fas fa-users"></i>
<span class="d-flex flex-grow-1">Competitors</span>
</a>
</div>
</li>
CSS:
.list-group-item-action:active {
color: #fff;
background-color: #294f75;
border-color: #294f75;
}