twitter bootstrap 3 dropdown style

Question

I'm having an issue with bootstrap's dropdown styles.

On a standard dropdown, once you click the nav link and the dropdown shows, an a:focus is applied to the href that was just clicked. That a:focus gets a background color of 'eeeeee'. The style stays there until you close the dropdown.

I've managed to remove it using .nav > li > a:focus{background:none !important}, but the problem I'm have now is that when you click anywhere on the page, effectively closing the dropdown, that same href gets a style applied to it for a split second. Just long enough for the href to get styled with a background color of 'eeeeee', and then it goes away in 1 second.

Does anyone know how to stop this? I've even gone as far as removing everything with a background color in bootstrap.min.css, but it still shows up for that split second.

Here's my nav:

<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 -->

And the 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}

Fiddle: http://jsfiddle.net/MjZnU/

Click on "about", then click off

Answer 1

Solved, wasn't the focus element being added, it's an active class being applied. Found the answer here: https://stackoverflow.com/questions/19011582/changing-active-dropdown-tab-background-color-in-bootstrap-3-0?rq=1