tektiv tektiv - 5 months ago 29
CSS Question

Remove blinking effet bootstrap dropdown

While modifying Bootstrap vanilla's css, I found a weird blinking effect when you click on a dropdown then click outside of it (in the body for example).




.dropdown > a:focus,
.open {
background-color: #444;
color: #FFF;
}

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>





I made a JSFiddle to make things clearer, and less difficult to explain.

Do you have any idea about which css selector should I use to fix it ? Thanks in advance !

Answer

You need to style your dropdown link instead of the dropdown itself by adding this in your css :

.navbar-default .navbar-nav > .dropdown > a {
    background-color:#222; 
    color:#FFF;
}

Including more tags and classes will hold a higher priority over a style on the same element without the extra classes.
For instance : just adding body before a class can make the class more specific.


I've updatded your JSFiddle as well.