I am trying to change the color and background color of the active link in a boostrap's dropdown menu.
I have overriden bootstrap's @dropdownLinkColorActive and @dropdownLinkBackgroundActive variables but this has no effet.
The css for ".navbar-inverse .nav .active > a" takes over, as seen in firebug:
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: #FFFFFF;
color: #4D4D4F;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background-color: #16A170;
background-image: linear-gradient(to bottom, #17AA76, #149466);
background-repeat: repeat-x;
color: #FFFFFF;
outline: 0 none;
text-decoration: none;
}
Why is the .navbar-inverse class overriding the .dropdown-menu class ?