引导：更改下拉菜单的活动链接颜色

Question

我试图改变颜色和背景颜色的活动链接在一个引导的下拉框。

我已经覆盖了bootstrap的@dropdownLinkColorActive和@dropdownLinkBackgroundActive变量，但这没有效果。

“.navbar inverse.nav.active”的css

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

为什么. navbar-inverse类重写. dropdown菜单类？

Answer 1

假设你需要的背景颜色是#fff，写下：

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  text-decoration: none;
  color: #333333;
  background-color: #fff;
  background-image: -moz-linear-gradient(top, #fff, #fff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff));
  background-image: -webkit-linear-gradient(top, #fff, #fff);
  background-image: -o-linear-gradient(top, #fff, #fff);
  background-image: linear-gradient(to bottom, #fff, #fff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fff', GradientType=0);
}

Answer 2

可能是因为下拉列表在导航栏里。

这个应该有用

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active     >     a:focus {
    background-color: #16A170 !important;
    background-image: linear-gradient(to bottom, #17AA76, #149466) !important;
    background-repeat: repeat-x !important;
    color: #FFFFFF;
    outline: 0 none;
    text-decoration: none;
}