'Bootstrap 3 dropdown menu changing background on submenu focus

I have changed the background colors of my Bootstrap menu, but the background color of the main dropdown item in the list is changing when the submenu (the menu that opens up when the dropdown item is clicked) is in focus (ie my mouse is over it).

This is the dropdown on hover (which is behaving as intended):

enter image description here

This is the dropdown when I have my mouse over the submenu that opens when the dropdown is clicked (the background color is not what I want; I want the background color to remain the same): enter image description here

Here's the HTML:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Dropdown <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
    </ul>
</li>

And the CSS:

.navbar-mainnav  {
    background-color: #883333;
    background-image: none;
}

.navbar-mainnav a, .navbar-mainnav a:hover {
    color: #FFFFFF;
}

.navbar-mainnav .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color:transparent;
}

.navbar-mainnav .nav > li > a:hover, .mainnav > li.dropdown.open  {
  background-image: none;
  background-color: #B54646;
}

.navbar-mainnav .dropdown-menu > li > a:hover, .navbar-mainnav .dropdown-menu > li > a:focus {
  background-color: white;
  background-image: none;
  filter: none;
}

.navbar-mainnav .dropdown-menu > li > a:hover {
  background-color: #CC6666;
  background-image: none;
}
htmlcsstwitter-bootstraptwitter-bootstrap-3


Solution 1:[1]

Just put this css i think this is worked

.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #B54646;
}

Solution 2:[2]

Maybe try this? Please post a jsfiddle so we can make sure it works.

.navbar-default .navbar-nav > li:hover {
  background: #your-background-color;
  color: #your-text-color;
}

Solution 3:[3]

Here's a working fiddle : https://jsfiddle.net/Lindow/yvyvg1ja/4/

To prevent the background from changing on dropdown click use :

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background-color: #CC6666;
}

Solution 4:[4]

You need to style anchor tag children of the .open class, along with :hover and :focus states like so:

.navbar-mainnav .nav .open>a, 
.navbar-mainnav .nav .open>a:focus, 
.navbar-mainnav .nav .open>a:hover {
  background: #B54646;
  color: #fff;
}

Run the code snippet in full page to see how it works.

.navbar-mainnav  {
    background-color: #883333;
    background-image: none;
}

.navbar-mainnav a, .navbar-mainnav a:hover {
    color: #FFFFFF;
}

.navbar-mainnav .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color:transparent;
}

.navbar-mainnav .nav > li > a:hover, .mainnav > li.dropdown.open  {
  background-image: none;
  background-color: #B54646;
}

.navbar-mainnav .dropdown-menu > li > a:hover, .navbar-mainnav .dropdown-menu > li > a:focus {
  background-color: white;
  background-image: none;
  filter: none;
}

.navbar-mainnav .dropdown-menu > li > a:hover {
  background-color: #CC6666;
  background-image: none;
}

.navbar-mainnav .nav .open>a, 
.navbar-mainnav .nav .open>a:focus, 
.navbar-mainnav .nav .open>a:hover {
  background: #B54646;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-mainnav">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Faisal Khan Samrat
Solution 2 BrendanS
Solution 3 Hiroyuki Nuri
Solution 4

Related Questions