Changing active dropdown tab background color in b

Question

I am using the following css to change background color of navbar dropdown active link.

.navbar .nav > li.dropdown.open.active > a:hover, 
.navbar .nav > li.dropdown.open > a
{
   color: #fff;
   background-color: #b91773;
   border-color: #fff;
}

It properly change background color of active dropdown link as shown in screenshot.

But if i extend same css for nav-tabs it doesn work. here is css class

.nav .nav-tabs > li.dropdown.open.active > a, 
.nav .nav-tabs > li.dropdown.open.active > a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}

Here is output

How to fix this issue.

Answer 1

What worked for me:

.navbar-default .navbar-nav .dropdown.open a:focus {
    background-color: #6dbcc9;
}

Answer 2

It would be a lot easier if you could make a jsfiddle. if not then here is what you can do.

1- make sure that the tab Added lies exactly in ".nav .nav-tabs > li.dropdown.open.active" classes and the path is correct. IF not, it wont work.

2- So, find out if you have added a class that is not relevant or you have not added a relevant class.

Answer 3

I think this should work:

.nav.nav-tabs > li.dropdown.active.open > a, 
.nav.nav-tabs > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-tabs > li.dropdown.open > a, 
.nav.nav-tabs > li.dropdown.open > ul.dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}

Note no space between .nav.nav-tabs cause to select for having both and not the second followed by the first.

caret:

.nav.nav-tabs > li.dropdown.active.open > a span.caret {border-top-color: #fff;border-bottom-color: #fff;}

Answer 4

You should fint the exact class of the dropdown menu. It could be in your nav or not. I changed the active class color of the pagination property of the Bootstrap Theme like this:

ul.dropdown-menu>li.active>a:hover{
    background: #419641 !important;
}

ul.dropdown-menu>li.active>a{
    background: #51AB51 !important;
}