单击后，Bootstrap下拉菜单显示蓝色框

Question

我正在使用Bootstrap为导航栏中的一个选项卡构建一个下拉菜单。我正在尝试自定义它；但是，在单击选项卡后，总会有一个蓝色框悬停该选项卡。

如果我根本不单击选项卡，则不会发生，但是单击一次并将鼠标悬停在同一选项卡上之后，会发生这种情况。子菜单中也会发生相同的情况。

我尝试了各种方法来覆盖CSS，但是它不起作用。这是我的导航栏代码。我该如何改写？

 <nav class="navbar">
        <div class="navbar-inner">
            <a href="#" class="brand"><div id="brand_font">Christina Yang</div></a>
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-home"></i>home</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-comment"></i>blog</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-info-sign"></i>about</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-camera"></i>photography</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="inner-color">
                        <i class="icon-user"></i>connect
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">LinkedIn</a></li>
                        <li class="divider"></li>
                        <li><a href="#">contact</a></li>                                        
                    </ul>
                </li>
                <li class="divider-vertical"></li>
            </ul>
            </div>
        </div>
    </nav>  

这是我与本节相关的CSS工作。

 <nav class="navbar">
        <div class="navbar-inner">
            <a href="#" class="brand"><div id="brand_font">Christina Yang</div></a>
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-home"></i>home</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-comment"></i>blog</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-info-sign"></i>about</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-camera"></i>photography</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="inner-color">
                        <i class="icon-user"></i>connect
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">LinkedIn</a></li>
                        <li class="divider"></li>
                        <li><a href="#">contact</a></li>                                        
                    </ul>
                </li>
                <li class="divider-vertical"></li>
            </ul>
            </div>
        </div>
    </nav>  

Answer 1

添加 !important 到你想要覆盖的 css 中。前任：

.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{
    background-color: #009999 !important;
  }