Changing active dropdown tab background color in bootstrap 3.0

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

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 2

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