Question

我遇到了bootstrap下拉样式的问题。

在标准下拉列表中，单击导航链接并显示下拉列表后，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/

点击“关于”，然后点击

Answer 1

Solved，不是要添加的焦点元素，它是一个应用的活动类。在这里找到答案：https://stackoverflow.com/questions/19011582/changing-active-dropdown-tab-background-color-in-bootstrap-3-0?rq=1

twitter bootstrap 3下拉风格

1 个答案: