Bootstrap 3 - 更改下拉菜单背景颜色

Question

我是 Bootstrap 的新手，我设置了下拉菜单并尝试了颜色。

我想做的是在选择下拉标题药丸后更改它的颜色。它目前变为浅灰色：

这是我的代码：

<div class="row hidden-xs">
  <div class="col-md-12">
    <ul class="nav nav-pills nav-justified nav-filter">
      <li role="presentation"><a href="#">Valentine's Day</a></li>

      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
          Recipient <span class="caret"></span>
        </a>
      </li>

      <li role="presentation"><a href="#">Occasion</a></li>
      <li role="presentation"><a href="#">Type</a></li>
      <li role="presentation"><a href="#">New</a></li>
      <li role="presentation"><a href="#">On Sale</a></li>
    </ul>
  </div>
</div>

用什么 CSS 来覆盖这种颜色？ - 不是下拉菜单本身，只是标题 link.

谢谢

Answer 1

这将更改活动 class（包括焦点）的 background/text 颜色：

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus {
    color: white;
    background-color: blue;
}

Answer 2

使用以下 css:

.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{
background-color: red;
}
.nav-tabs>li>a:hover {
background-color: red;
}

DEMO

Answer 3

.nav>li>a:hover,.nav>li>a:visited {
     background-color: #222; /* add your desired color */
}

Answer 4

您可以像这样覆盖 .nav-pills 的悬停、活动和焦点状态..

.nav-pills>li>a:hover {
    background-color: #FF6699;
}
.nav-pills .open>a, .nav-pills .open>a:active, .nav-pills .open>a:focus{
    background-color: #FF6699;
}

Demo

Bootstrap 3 - 更改下拉菜单背景颜色

Bootstrap 3 - Change dropdown background colour

css

twitter-bootstrap-3

DEMO