Bootstrap下拉菜单外观

时间:2015-09-08 17:32:33

标签: css3 twitter-bootstrap-3

我不知道我在寻找什么,但是当按下一个项目时,另外两个因黑色背景而改变,我无法弄清楚这两个规则适用于哪个"没有按下项目"。

我尝试在按下的元素上设置活动/焦点状态,但与它无关。

这是一个简单的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>

我错过了什么?

以下是该行为的屏幕截图:

enter image description here

[编辑]

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

我正在尝试调试行为,以便找到导致此情况发生的原因。

只有当我真正按下&#34; TDP&#34;才会发生这种情况。选项,我无法在控制台中进行调试,而按下&#34;在项目上,因为点击会触发链接继续。

所以我的问题是,当按下某个项目时,可以应用什么样的CSS规则?如果没有任何东西,这是否意味着Bootstrap在按下它时实际执行某些操作?它尝试查看下拉javascript代码,没有看到类似的内容。

[编辑#2]

刚刚意识到这发生在我正在使用的模板中。 点击here即可查看。 选择右上方菜单中的用户选项,然后按&#34;按&#34;任何显示的选项。所有其他人都将显示为黑色。

[编辑#3]

似乎其他元素被激活&#34;在按下其他菜单选项的同时,这会导致菜单中未按下的项目的背景发生变化。我仍然不明白为什么通过浏览器强制执行:活动状态并不适用css规则,但这修复了我还没有理解的内容&#34;

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

1 个答案:

答案 0 :(得分:-1)

正如Schmalzy所说,你有一个自定义的CSS,如果你可以在问题中包含它,那就太好了。

或者您可以尝试更改.dropdown-menu&gt; li> a:悬停{background-color:transparent; }

如果有帮助,请告诉我

相关问题