CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Zeeshan Ahmad
Zeeshan Ahmad

Reputation: 5645

Bootstrap show unwanted outline on the bottom of dropdown link

I have a link with a dropdown menu. Problem is that when I click on the link the dropdown opens but there is unwanted border line on the bottom of the link. When i hover on the dropdown link the unwanted bottm line hides. But whenever mouse out from the link the unwanted bottom line displays again.

Here is my code:

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="dropdownMenu2" style="color: #333;"><i class="fa fa-gear fa-lg"></i> <span class="caret"></span></a>
    <ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu2">
        <li><a href="#"><i class="fa fa-align-left"></i> Reorder Pages</a></li>
        <li><a href="#"><i class="fa fa-trash"></i> Delete</a></li>
    </ul>
</div>

Demo is here:

enter image description here

enter image description here

Upvotes: 1

Views: 1048

Answers (3)

Kamran Ahmed
Kamran Ahmed

Reputation: 12440

Probably border, outline or underline. Try this:

a.dropdown-toggle {
   border: none;
   outline: none;
   text-decoration: none;
}

You can try and see if there is only one border bottom tho and cancel it only in case you want to use other borderlines.

Upvotes: 2

Igor Ivancha
Igor Ivancha

Reputation: 3451

Now you have 

.dropdown-toggle:hover {
  text-decoration: none;
}

just add 

.dropdown-toggle:hover,
.dropdown-toggle:focus {
  text-decoration: none;
}

in your css, it resolves issue!

Jsfiddle-example

Upvotes: 0

AL Emran
AL Emran

Reputation: 117

In a:toggle Class have Text Decoration . Remove the text decoration.

a:hover { 

color: #23527c;
text-decoration: underline;

}

Upvotes: 0

Related Questions