css - Bootstrap 下拉菜单外观

Question

我不知道我在找什么，但是当按下一个元素时，其他两个变为黑色背景，我无法弄清楚这两个“未按下的元素”应用了哪个规则。

我尝试在按下的元素上设置事件/焦点状态，但与它无关。

这是一个简单的 bootstrap 3 菜单，使用以下代码构建:

<ul class="nav navbar-nav navbar-right">   
    <li>
        <a class="user-display-name" href="/galaxy/profile">Pascal Lalonde</a>
    </li>
    <li><a data-current-locale="en" href="/galaxy/repos?locale=fr">FR</a></li>
    <li class="open">
        <a class="dropdown-toggle" data-toggle="dropdown" href="/galaxy/"><span class="glyphicon glyphicon-home"></span><i class="fa fa-caret-down borderless"></i></a>
        <ul class="dropdown-menu">
            <li>
                <a href="/galaxy/repos">Repository</a>
            </li>
            <li><a href="/galaxy/tdp">TDP</a></li>
            <li><a href="/galaxy/rk">RK</a></li>
        </ul>
    </li>
</ul>

我错过了什么？

这是行为的屏幕截图:

[编辑]

我被要求提供示例 CSS 代码，但如果我可以的话，这意味着我已经有了答案。我不知道我在寻找什么。

我正在尝试调试该行为，以便找到导致这种情况发生的原因。

只有当我实际按下“TDP”选项时才会发生这种情况，我无法在“按下”该元素时在控制台中进行调试，因为单击会触发链接继续。

所以我的问题是，按下某个元素时可以应用哪种 CSS 规则？如果什么都没有，这是否意味着 Bootstrap 在按下它时实际上执行了某些操作？它尝试查看下拉菜单的 javascript 代码，但没有看到类似的东西。

[编辑#2]

刚刚意识到我正在使用的模板中会发生这种情况。 点击here查看。 在右上角的菜单中选择用户选项，然后只需“按”任何显示的选项。所有其他的将显示为黑色。

[编辑#3]

似乎其他元素在按下其他菜单选项时被“激活”，这导致菜单中未按下的元素的背景发生变化。我仍然不明白为什么通过浏览器强制 :active 状态不应用 css 规则，但这解决了我“还不明白”的问题

.navbar .navbar-nav li .dropdown-menu:active {
    background-color: #fff;
}

Answer 1

正如 Schmalzy 所说，您有一个自定义 CSS，如果您可以将其包含在问题中，那就太好了。

或者你可以尝试改变 .dropdown-menu > li > a:hover { background-color: transparent;

如果有帮助，请告诉我