Currently, I am utilizing bootstrap 4 to create a menu that includes dropdown items. The issue I am facing is that when hovering over a dropdown link, the background color changes and the dropdown opens. However, as soon as I move the mouse to select one of the dropdown items, the color reverts back to its original state. I am seeking a solution to keep the hover color persistent while the dropdown is open.
body {
background-color: #091230;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.navbar-nav>li {
margin-left: 10px;
margin-right: 10px;
}
nav .navbar-nav li>a {
color: white !important;
-moz-border-radius: 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
nav .navbar-nav li>a:hover {
background-color: grey;
}
.navbar .dropdown-menu {
background-color: grey;
margin: 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
border-top-color: #343A40 !important;
}
.dropdown div {
border-color: grey !important;
}
.navbar .dropdown-menu a {
color: white !important;
}
.dropdown-item:hover {
background-color: #343A40 !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand navbar-dark bg-dark">
<ul class="navbar-nav">
<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
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
<a class="dropdown-item" href="#">Item 4</a>
</div>
</li>
</ul>
</nav>