Bootstrap下拉菜单显示蓝色框后单击

我使用Bootstrap为我的导航栏中的其中一个选项卡建立一个下拉菜单。我试图定制它;然而，总是有这个蓝色框在我点击标签后悬停在标签上。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; 
    } 


}

来源

2013-07-31 Christina

你可以发布你的relavent CSS吗？或JSFiddle – Jonnny

我发布了它！ – Christina

你能否提供错误的实时执行？ – 2013-07-31 05:16:11

add！对你来说重要的是你要重写的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; 
    }

来源

2013-08-01 10:47:47 rajeshpanwar

我已经尝试过，但它不能解决问题。还是）感谢你的建议！ – Christina

试试这个

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

这可以使复位下拉类从引导

来源

2013-10-16 21:19:34

的CSS outline: none;会的工作，并隐藏焦点蓝盒子，

但要意识到这是Chrome，FF和Safari中的默认浏览器行为，并且会让缺乏视力的人很难浏览您的网站。

您应该只将其仅添加到页面上的不可导航元素。

来源

2014-03-27 16:23:11 Karlgoldstraw

尝试这个CSS添加到您的a元素：

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

本工程为引导的下拉菜单精细，应该在你的情况下工作了。如果有必要，请添加!important属性。

请注意，您有4个相同的ID，这看起来有点棘手。

来源

2016-06-02 22:32:56

Bootstrap下拉菜单显示蓝色框后单击

回答

相关问题