Выпадающее меню Bootstrap, показывающее синий квадрат после нажатия

Question

Я использую Bootstrap для создания раскрывающегося меню для одной из моих вкладок на панели навигации. Я пытаюсь настроить его; однако всегда есть этот синий квадрат, который накладывает вкладку после щелчка на вкладке.

Это не происходит, если я вообще не нажимаю на вкладку, но это происходит после нажатия на нее один раз и наведения мыши на ту же вкладку. То же самое происходит в подменю.

Я пробовал разные способы переопределить CSS, но он не работает. Вот мой код для навигатора. Как мне переопределить это?

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

Вот мой CSS соответствующие работы для этого раздела.

@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

Добавить важное для вас css, которое вы хотите переопределить. Пример:

.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

Попробуйте

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

Это может сделать сброс класс выпадающий из начальной загрузки

Answer 3

CSS-outline: none; будет работать, и скрыть синий прямоугольник на фокус,

но быть осознавая, что это поведение браузера по умолчанию в Chrome, FF и Safari, и это затруднит перемещение людей с определенным углом зрения на ваш сайт.

Вы должны только добавить его только к несуществующим элементам на вашей странице.

Answer 4

Попробуйте добавить этот CSS для ваших a элементов:

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

Это работает для выпадающего меню штрафа Bootstrap и должен работать в вашем случае тоже. Также добавьте свойство !important, если это необходимо.

Обратите внимание, что у вас есть 4 одинаковых идентификатора, это выглядит немного сложнее.