html - Bootstrap 下拉菜单点击颜色

Question

我正在使用来自 getbootstrap.com CSS 页面的导航栏，我现在正在编辑它以满足我的需要。我已经完成了大部分工作，但无法弄清楚如何在此处更改此颜色(白色): http://image.prntscr.com/image/75cbf6b49f3b48eab11f28a6aeca8ae8.png这是 :active 状态吗？我试过的:

.navbar .dropdown-toggle:active{
  background-color: inherit;
}

.dropdown 也一样。这是代码:

<ul class="nav navbar-nav navbar-right m-r-0">
                @if(Auth::check())
                <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="{{Auth::user()->avatar}}" alt="" class="profileimg">  <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>
                <li></li>
                @else
             <li><a href="{{route('steamauth')}}"><img src="https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_01.png" alt=""></a></li>
             @endif
            </ul>

Answer 1

使用 .navbar-default Bootstrap 针对打开的导航栏下拉列表的 background-color 设置以下内容:

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
    color: #555;
    background-color: #e7e7e7;
}

因为您没有使用 .navbar-default，请尝试为您的 .navbar 下拉菜单定位以下内容

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

这是一个jsfiddle演示打开下拉菜单的背景颜色设置(点击后)。