html - 防止背景在 .dropdown-toggle 组件上改变颜色

Question

我这里有这段代码:(更新:我现在把整个导航栏代码放在这里是因为我意识到最初发布的数量有限可能会限制找出问题的能力)

  <nav class="navbar navbar-inverse navsize">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <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" ><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul id="navposition" class="nav navbar-nav">
            <li class="individualbtnposition col-lg-2">@Html.ActionLink("Home", "Index", "Home")</li>
            <li class="dropdown individualbtnposition">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li>@Html.ActionLink("Our History", "Index", "OurCompany")</li>
                    <li>@Html.ActionLink("Facilities", "Facilities", "OurCompany")</li>
                </ul>
            </li>
            <li class="dropdown individualbtnposition">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li class="dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
                        <ul class="dropdown-menu">
                            <li>@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</li>
                            <li>@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</li>
                            <li>@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</li>
                            <li>@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</li>
                            <li>@Html.ActionLink("Payroll Forms", "PayrollForms", "FormsHandlers")</li>
                        </ul>
                    </li>
                    <li><a href="#">Pay Stubs</a></li>
                    <li>@Html.ActionLink("FAQ", "FAQ", "FormsHandlers")</li>
                </ul>
            </li>
            <li class="dropdown individualbtnposition">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">IT Support</a></li>
                    <li>@Html.ActionLink("Purchasing Ticket", "OnlineForms", "FormsHandlers", new {id = "purchasing-services-form" })</li>
                    <li><a href="#">Maint. Support</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="logout col-lg-1">
    <a asp-area="" asp-controller="Home" asp-action="Logout">Sign Out</a>
</div>

在 class="dropdown-toggle"上，单击菜单按钮时，它会将其周围的方 block 更改为黑色。我不希望它改变颜色，但我似乎无法弄清楚如何阻止它这样做。我唯一能弄清楚的是，如果我将这段代码放入:

  .dropdown-toggle{ background: white; }

然后它在点击它之前将背景更改为白色。所以我可以在点击之前影响颜色，但点击之后我似乎无法让它完全不被改变。有任何想法吗？这是它正在做什么的图片以供引用:

Answer 1

我能够使用开发工具将其缩小到正是将黑色放在那里的原因，然后我只是手动更改它。这是我为修复它而放入的一段 css:

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
color: #fff;
background-color: initial;