Bootstrap popup menu showing a blue border after clicking

Question

I use Bootstrap to create a drop-down menu for one of my tabs in the navigation bar. I try to configure it; however, there is always this blue square that points the tab after clicking on the tab.

This does not happen if I don’t click on the tab at all, but it happens after clicking on it once and hovering over the same tab. The same thing happens in the submenu.

I tried different ways to override CSS, but it does not work. Here is my navigator code. How to do it?

<nav class="navbar"> <div class="navbar-inner"> <a href="#" class="brand"><div id="brand_font">Christina Yang</div></a> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="divider-vertical"></li> <li><a href="#" id="inner-color"><i class="icon-home"></i>home</a></li> <li class="divider-vertical"></li> <li><a href="#" id="inner-color"><i class="icon-comment"></i>blog</a></li> <li class="divider-vertical"></li> <li><a href="#" id="inner-color"><i class="icon-info-sign"></i>about</a></li> <li class="divider-vertical"></li> <li><a href="#" id="inner-color"><i class="icon-camera"></i>photography</a></li> <li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="inner-color"> <i class="icon-user"></i>connect <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">LinkedIn</a></li> <li class="divider"></li> <li><a href="#">contact</a></li> </ul> </li> <li class="divider-vertical"></li> </ul> </div> </div> </nav> 

Here is my respective CSS work for this section.

  @media (max-width: 767px) { .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { background-color: #009999; display: none; border: none; /*box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;*/ color: #555555; text-decoration: none; } } @media (max-width: 767px) { .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus { background-color: #009999; } } @media (max-width: 480px) { .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{ background-color: #009999; } } .dropdown-menu a:hover,.dropdown-menu a:focus{ filter:none !important; -webkit-transition:background 1s ease; -moz-transition:background 1s ease; -o-transition:background 1s ease; transition:background 1s ease; } .dropdown-menu::after, .dropdown-menu::before{ border:none !important; } @media (max-width: 979px) { .navbar .nav > li > .dropdown-menu:after { border: none; } .navbar .nav > li > a, .navbar .dropdown-menu a { border-radius: 0; color: white; font-weight: normal; padding: 10px 10px 11px; } .dropdown-toggle > a:visited { border: none; display: none; box-shadow: none; } .dropdown-toggle > a:active { border: none; display: none; box-shadow: none; } .navbar .nav > li > a:hover { display: none; } .navbar .nav > li > a { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; } } 

Answer 1

Add it! the css you want to override is important to you. Example:

 .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{ background-color: #009999 !important; } 

Answer 2

try it

 .dropdown a { background-color:#fff transparent !important; } 

The reset dropdown class can do this from bootstrap.

Answer 3

CSS outline: none; will work and hide the blue frame in focus,

but keep in mind that this is the default browser behavior in Chrome, FF and Safari browsers, and this will make it difficult for people with a certain angle of view to move to your site.

You should add it only to nonexistent elements on your page.

Answer 4

Try adding this css to your a elements:

 a, a:link, a:hover, a:visited, a:active, a:focus background-color: transparent; 

This works for the bootstrap popup menu in order and should work in your case too. Also add the !important property, if necessary.

Please note that you have 4 identical identifiers , this looks a bit more complicated.