Twitter 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-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;
  }

试试这个

.dropdown a {
background-color:#fff transparent !important; }

---

也就是说，可以从bootstrap中重置下拉类，CSS

outline:none将起作用，并在焦点上隐藏蓝色框

但请注意，这是Chrome、FF和Safari中的默认浏览器行为，会使视力不全的人很难浏览您的网站

您应该只将其添加到页面上不可导航的元素。
尝试将此css添加到您的
a
元素：

a,
a:link,
a:hover,
a:visited,
a:active,
a:focus
  background-color: transparent;

这适用于bootstrap的下拉菜单，也适用于您的情况。还要添加一个
！重要信息
属性（如有必要）

请注意，您有4个相同的ID，这看起来有点棘手。
对于bootstrap 4，您只需从
a
元素中删除
btn
css类即可。然后整个过程就像一个常规链接。链接的悬停效果也很烦人，这就是为什么我在我的css文件中添加了以下内容：

。下拉切换：悬停{
颜色：黑色；
文字装饰：无；
}

这将关闭链接元素的悬停效果
 我在bootstrap.css中搜索蓝色
#007bff
，发现当某个项目处于活动状态或单击时的样式为：

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
}

例如，您可以覆盖它，如下所示：

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: red;
}

！重要信息
似乎不是必需的。
不要更改bootstrap.css。创建另一个CSS文件，您可以在其中覆盖它

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a

将“背景图像”设置为“无”，并将“背景颜色”设置为所需的任何颜色。如果仍然不工作，则使用！重要。
你能发布你的相关CSS吗？或者JSFIDDLE您是否能够提供错误的实时实现？我不太确定如何提供实际代码的实时实现，但这里有一个指向bootstrap examples（）Oops的链接，如果您查看第一个示例并单击下拉菜单并移开鼠标，您将看到一个蓝色框，它围绕着您单击的选项卡。我认为这是一个默认的东西，我正在尝试摆脱它。请使用jsfiffle创建一个代码的实时版本我已经尝试过了，但它没有解决问题。谢谢你的建议！