CODEWITHSUNDEEP
csstwitter-bootstrap-3
P. Lalonde
P. Lalonde

Reputation: 694

Bootstrap dropdown-menu appearance

I don't know what I am looking for, but when pressing an item, the two others changes for a black background, I can't figure out which rule is applied on those two "not pressed items".

I tried setting active / focus states on the pressed element but had nothing to do with it.

It's a simple bootstrap 3 menu built with the following code:

<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>

What is it I am missing?

Here's the screenshot of the behavior:

enter image description here

[EDIT]

I am being asked to provide sample CSS code, but if I could, this would mean that I'd already have my answer. I don't know what I am looking for.

I am trying to debug the behavior so I can find what is causing this to happen.

Thing is this happens only when I actually press on the "TDP" option, I cannot debug in the console while "pressing" on the item, because a click triggers the link to continue.

So my question here, is what kind of CSS rule could be applied when an item is pressed? If nothing is there, would this mean that Bootstrap actually execute something when pressing on it? It tried looking at the dropdown javascript code, did not see anything like it.

[EDIT #2]

Just realized this happens in the template I am using. Click here to see. Choose the user option in the top right menu and then just "press" any of the shown options. All others will be displayed black.

[EDIT #3]

It seems the other elements gets "activated" while pressing the other menu options, this causing the background of the not-pressed items of the menu to change. I still don't understand why forcing the :active state through the browser doesn't apply the css rules, but this fixed what I "don't understand yet"

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

Upvotes: 0

Views: 158

Answers (1)

Achillies
Achillies

Reputation: 1

As said by Schmalzy you have a custom CSS it would be nice if you can include that in the question.

Or you can try to change .dropdown-menu > li > a:hover { background-color: transparent; }

Let me if that helps

Upvotes: -1

Related Questions