如何改变我的下拉列表的颜色在我的菜单栏后点击外面？-引导程序3

Question

我正在尝试使用Bootstrap 3构建一个模板，但我遇到了这个问题。

在我的navbar-default中，我有一个下拉菜单。默认情况下，下拉切换的字体为灰色，背景透明。悬停时，灰色变成白色。点击后，下拉菜单打开，切换本身变成白色，其背景颜色变成较暗的蓝色（焦点和活动）。

然而，如果我在打开下拉菜单的情况下点击外面的任何地方，一秒钟，切换器的字体颜色变成深灰色，背景变成云色。大约一秒钟后，它又恢复正常。这对我来说是非常刺耳的，我似乎找不到CSS对此负责。（我正在使用引导程序3）

不管怎么说，看看这张图片就能更好地理解我的意思。

这是顺便在我的小酒吧。

最后，这里是我的代码：

HTML

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <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="#"><span class="brand-name"> My brand</span></a>
            </div>


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-user"></i> Username</a>
              <ul class="dropdown-menu">
                <li><a href="#">Account</a></li>
                <li><a href="#">My reviews</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Logout</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

我正在使用以下CSS代码更改悬停、活动和焦点的颜色：

.navbar-default .navbar-nav .dropdown .dropdown-toggle:focus,
.navbar-default .navbar-nav .dropdown .dropdown-toggle:hover,
.navbar-default .navbar-nav .dropdown .dropdown-toggle:active {
    color: #fff;
    background-color: ((Dark blue color code));
 }

有什么方法可以改变它，使它回到正常状态，而不是1秒的颜色变化？

Answer 1

试试这个

     .navbar-default .navbar-nav .dropdown .dropdown-toggle{
           choose what color u want to
    }

    .navbar-default .navbar-nav .dropdown .dropdown-toggle:focus,
    .navbar-default .navbar-nav .dropdown .dropdown-toggle:hover
     {
        color: #fff;
        background-color: ((Dark blue color code));
     }