twitter-bootstrap Bootstrap 导航栏下拉样式

Bootstrap navbar dropdown style

提问by Béla Tóth

How can i change the marked colors of the dropbar on a navbar? I used a navbar generator, but it is have a bug and don't generate the mentioned css codes for the desired colors. Here is the picture:

如何更改导航栏上下拉栏的标记颜色？我使用了导航栏生成器，但它有一个错误，并且不会为所需的颜色生成提到的 css 代码。这是图片：

Here is my current css overrides:

这是我当前的 css 覆盖：

.dropdown-menu { background-color: #3E968A}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu > .active > a:hover { background-color: #42CBAD}
.dropdown-menu>li>a { color: #EEF9FA}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #1D2C43}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #1D2C43}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret, .dropdown-menu > .active > a { border-top-color: #486972}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #1D2C43}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #486972}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EEF9FA}

回答by vanburen

This is what it looks like you're trying to do and if not it should help you apply the styling you want to the navbar.

这就是您正在尝试做的事情，如果不是，它应该可以帮助您将想要的样式应用于navbar.

You should also checkout this post > Change navbar color in Twitter Bootstrap 3and this link (TWBSColor) referenced inside the post

您还应该查看这篇文章 >更改 Twitter Bootstrap 3 中的导航栏颜色以及文章中引用的此链接 ( TWBSColor)

See working Snippet.

请参阅工作代码段。

.navbar.navbar-inverse {
  background-color: #3e968a;
}
.navbar.navbar-inverse .navbar-nav > li > a {
  background-color: #3e968a;
  color: #1d2c43;
}
.navbar.navbar-inverse .navbar-nav > li > a:hover {
  color: #42cbad;
}
.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #486972;
  color: #eef9fa;
}
.navbar.navbar-inverse .dropdown-menu {
  background-color: #3e968a;
}
.navbar.navbar-inverse .dropdown-menu > li > a {
  color: #eef9fa;
}
.navbar.navbar-inverse .dropdown-menu > li > a:hover,
.navbar.navbar-inverse .dropdown-menu>li>a:focus {
  background-color: #42cbad;
  color: #1d2c43;
}
.navbar.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle,
.navbar.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle,
.navbar.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle {
  background: #486972;
  color: #eef9fa;
}
.navbar.navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
  border-bottom-color: #486972;
}
.navbar.navbar-inverse .navbar-brand {
  color: #1d2c43;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Brand</a>

    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Link</a>

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

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>

            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>

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

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>