How to maintain focus state on parent item in dropdown menu? - html

Question

I have a menu with a dropdown in it. When I click the dropdown, the child menu is a color. I'm trying to maintain that same color (which is in the hover state) in the parent item, after the menu is clicked. Currently, when I click the dropdown and then mouse away from the parent, it changes back to the original menu color (pink).
Best to open the snippet in full page to see what I'm referring to.
.dropdown-menu {
border: none;
border-radius: 0;
margin: 0;
}
.dropdown-item:hover {
background-color: #0091c7;
}
.nav-link.dropdown-toggle:hover {
background-color: #00aeef;
}
.nav-link > li.dropdown-toggle.active > a,
.nav-link > li.dropdown-toggle.active > a:focus,
.nav-link > li.dropdown-toggle.active > a:hover {
background-color: #00aeef;
color: #ffffff;
}
.bg-pink {
background-color: #d60c8c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container p-5">
<div class="row">
<div class="col-sm-12">
<!-- HTML here -->
<div class="container-fluid bg-pink">
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg navbar-light bg-pink">
<a class="navbar-brand" href="#">
<i class="fa fa-home fa-2x"></i>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
Dropdown Parent
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #00aeef;">
<a class="dropdown-item" href="#">Action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action Action</a>
<a class="dropdown-item" href="#">Action Action</a>
<a class="dropdown-item" href="#">Action Action</a>
<a class="dropdown-item" href="#">Action Action Action</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

When the dropdown is clicked, the show class is added to its parent li.
I added
li.show > #navbarDropdown,
to your css here:
li.show > #navbarDropdown,
.nav-link > li.dropdown-toggle.active > a,
.nav-link > li.dropdown-toggle.active > a:focus,
.nav-link > li.dropdown-toggle.active > a:hover {
background-color: #00aeef;
color: #ffffff;
}