0

我对引导程序的下拉样式有疑问。

在标准下拉列表中，一旦您单击导航链接并显示下拉列表，a:focus就会将 an 应用于刚刚单击的 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/

点击“关于”，然后点击关闭

4

1 回答 1

2

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

于 2013-10-30T04:37:57.807 回答