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 {1}}。 >是直接子选择器，li不是.navbar的直接子项。

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

看起来像CSS负责黑色背景颜色   单击以显示下拉列表的LI是：

.navbar-nav＆gt; .open＆gt; a，.navbar-inverse .navbar-nav＆gt; .open＆gt; a：focus，   .navbar-inverse .navbar-nav＆gt; .open＆gt; a：hover.navbar-inverse

Answer 2

如果泰米尔的代码不起作用，请尝试使用此代码：

.navbar-nav > li > .dropdown-menu { background-color: #FF0000; }

与其他海报一样，如果您发布了下拉列表已经继承的CSS，那么帮助会更容易。

更改下拉菜单

2 个答案: