css - Bootstrap：更改下拉菜单的活动链接颜色

Question

我正在尝试更改 boostrap 下拉菜单中活动链接的颜色和背景颜色。

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

".navbar-inverse .nav .active > a" 的 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-menu 类？

Answer 1

可能是因为下拉菜单在导航栏中。

这个应该工作

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

Answer 2

假设你需要的背景颜色是#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);
}