我遇到了引导程序的下拉样式问题。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