Bootstrap drop down menu showing blue box after clicking

Question

I'm using Bootstrap to build a drop-down menu for one of my tabs in the navbar. I'm trying to customize it; however, there is always this blue box that hovers the tab after I click the tab.

It doesn't happen if I don't click the tab at all, but it happens after clicking it once and hovering my mouse over the same tab. The same thing happens in the submenu.

I've tried different ways to override the CSS, but it's not working. Here's my code for the navbar. How do I override this?

 <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's my relevant 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

The CSS outline: none; will work, and hide the blue box on focus,

but be aware that this is a default browser behavior in Chrome, FF and Safari and will make it hard for partially sighted people to navigate your site.

You should only add it only to non-navigable elements on your page.