2013-10-30 90 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

回答