html - 更改下拉菜单的背景颜色

Question

我目前正在使用 Bootstrap 为网站制作导航栏。一切似乎都按预期进行。但是在菜单上我有一个 li 然后显示一个下拉列表。这就是问题所在。当我点击 li 时，背景似乎变成了黑色，我不知道这是从哪里来的。

我的标记如下所示:

<div class="navbar navbar-inverse navbar-fixed-top" runat="server">
<div class="container">
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav" runat="server">
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">5</a>
            </li>
            <li class="dropdown"><a runat="server" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">Training Group<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

当背景保持白色时，我希望如此。我试过了

.navbar> li.dropdown.active.open > a { background-color: #fff; }

但它似乎并没有改变背景颜色。有人可以阐明我要去哪里错了吗？

在此先感谢您的帮助和支持

CodePen

Answer 1

第一条评论(来自 Tamil Selvan)可能对您有用(假设规则足够具体)，但如果您知道原始代码失败的原因，它可能会有所帮助:原因是 > 在 .navbar 之后。 > 是直接子选择器，li 不是 .navbar 的直接子选择器。

更新:作者发布了一个 Pen 并且变得更加清楚他根本没有针对下拉菜单，它是关于触发元素的，所以这里是有帮助的:

Looks like the CSS responsible for the black background color on the LI that you click to reveal the dropdown is:

.navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover.navbar-inverse