2013-10-30 88 views
0

我遇到了引導程序的下拉樣式問題。twitter bootstrap 3下拉樣式

在標準下拉列表中,一旦您點擊導航鏈接並顯示下拉菜單,就會將a:focus應用於剛剛單擊的href。 a:focus獲得'eeeeee'的背景顏色。樣式會一直保留,直到您關閉下拉菜單。

我已經設法使用.nav > li > a:focus{background:none !important}將其刪除,但現在我遇到的問題是,當您單擊頁面上的任何位置,有效關閉下拉菜單時,同一href會在一分之秒內爲其應用樣式。只需足夠長的時間讓href以「eeeeee」的背景顏色進行設計,然後在1秒內消失。

有誰知道如何制止這種情況? 我甚至用bootstrap.min.css中的背景顏色去除了所有東西,但它仍然顯示在那一瞬間。

這裏是我的資產淨值:

<div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="http://localhost/www/Mon/">home<span class="partition">|</span></a></li> 
     <li><a href="services">services<span class="partition">|</span></a></li> 
     <li class="dropdown text-left"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">about us<span class="partition">|</span></a> 
      <ul class="dropdown-menu"> 
       <div class="menu_arrow"></div> 
       <div class="menublue"> 
        <li class="head"><a href="about-me">about</a></li> 
        <li class="head">list</li> 
        <li class="nav_list"></li> 

       </div> 
      </ul> 
     </li>            
     <li><a href="gallery">the gallery<span class="partition">|</span></a></li> 
     <li><a href="resources">resources</a></li> 
    </ul> 
</div><!--/.navbar-collapse --> 

而CSS:

.nav a{color:#FFF;margin:0 !important;padding:0 !important;} 
.navbar-nav{margin:0 !important;0} 
.navbar-collapse{margin:0 !important;padding:0 !important;} 
.navbar-inner, .navbar .btn-navbar { 

} 
    .nav li {margin:0 0 0 10px;} 
    .nav li a{margin:0 8px 0 0;padding:0 !important;outline:none;}   
    .nav li a:hover .partition{color:#FFF} 
    .nav > li > a:hover{background:none !important} 
    .nav > li > a:active{background:none !important} 
    .nav > li > a:visited{background:none !important} 
    .nav > li > a:focus{background:none !important} 
    .partition{margin:0 0 0 8px;} 
     .menu_arrow{background:url(images/menu_arrow.png) center top no-repeat;height:9px;width:178px;margin-top:-14px;} 
     .dropdown-menu{background:none !important;box-shadow:none !important;border:none !important;border-radius:none !important;margin-top:15px !important;width:178px !important;} 
     .menublue{background: url(images/menu_bg.png) bottom no-repeat;padding:10px 0 10px 0} 
     .dropdown-menu .active > a, 
     .dropdown-menu .active > a:hover { 

     } 
     li.nav_list{list-style:disc;margin:0 0 0 23px !important;color:#FFF}    
     li.head{font-weight:bold;color:#FFF} 

小提琴:http://jsfiddle.net/MjZnU/

點擊 「關於」,然後單擊關閉

+0

在jsfiddle中給出樣本。它甚至比提供gif更好。 – Rudy

+0

請參閱更新爲小提琴 – David

+0

嘗試使用bootply。 – jayeshkv

回答