我遇到了引導程序的下拉樣式問題。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/
點擊 「關於」,然後單擊關閉
在jsfiddle中給出樣本。它甚至比提供gif更好。 – Rudy
請參閱更新爲小提琴 – David
嘗試使用bootply。 – jayeshkv