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):

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):

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;
}

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;
}

How to change text color during hovering dropdown menu items , Just put this css i think this is worked .navbar .nav li.dropdown.open > .dropdown-​toggle, .navbar .nav li.dropdown.active > .dropdown-toggle,  Bootstrap change Dropdown Menu Background Color: Sometimes we need to change the dropdown menu background color in Bootstrap.There are many ways to do this, You can create your own class to change the background color of the Bootstrap dropdown Menu background Color.

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;
}

[Solved] Change the background color of the menu bar or navbar is , I have a navbar from MDB and there is a dropdown menu. it shows ok, but when I hover on any item of this dropdown list text isn't visible. instead of class .​dropdown use together .btn-group with .nav-item . add this CSS code to .​dropdown .dropdown-menu .dropdown-item:hover{background-color: pink !​important;}  @media (max-width:767px) { .navbar-nav .open .dropdown-menu { background-color:#fff; } } Remove media query if you want it at all times not just mobile. I’ll have to explain how you get it later though 🙂

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;
}

Bootstrap menu with screen overlay on active dropdown, /*Start My Custom Nav*/ .navbar-custom { background-color: #0026ff; border-​color: .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus { color: http://bootstrap-tutorial.bootstraptor.com/post/53191688399/bootstrap-​navigation-nav-bar[^] Add second level of sub menu to bootstrap navbar. The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

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>

Solved with CSS! Dropdown Menus, Dim the screen on hover of menu item and focus on dropdown But make it hidden with opacity:0; or visibility:hidden;; Make :after element visible on mouse hover (or onclick) by changing opacity and/or visibility <li><a class="dropdown-​item" href="#"> Submenu item 3</a></li> background-color: rgba(0,0,0,.7);. A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.

Targeting Menu Elements with Submenus in a Navigation Bar, Some of those solutions focus around not only making the web Now, say we want a sub-menu dropdown on the second navigation item. <li><a href="#">​Sub-2</a></li> <li><a href="#">Sub-3</a></li> </ul> background: darkorange; Create a menu that, on smaller screens, changes into a dropdown  We have styled the dropdown button with a background-color, padding, etc. The .dropdown class uses position:relative, which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute). The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below).

Change background color of active page in menu drop-down, By extension, drop down menus are merely nested <ul> s. Dropdowns are a common component of modern (and not so modern) web design. Using pure CSS  Hi, there. I need your help.I have a navbar from MDB and there is a dropdown menu. I chose a dark theme, and when I click on this menu, it shows ok, but when I hover on any item of this dropdown list text isn't visible.

How to change submenu hover color + other problem, I would like the active page background color to be the same as the Customize -> Activello Options -> Other -> Custom CSS .dropdown-menu>.active>a, .​dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{ background​-color: #7dc290; } #page .navbar-default .navbar-nav a:hover { The Bootstrap navbar classes The navigation bar in Bootstrap-based projects can be created by using navbar and its related classes quite easily. Bootstrap provides two styles that you may specify in the <nav> tag. These classes are: navbar-default navbar-inverse The navbar-default gives a grayish look to the navigation bar while inverse gives it black. In …

Comments
  • please can you make a fiddle
  • need a fiddle, the html looks incomplete.