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下拉菜單顯示藍色框後單擊

回答

相關問題