Html Bootstrap 3导航条锚元素在活动/焦点状态下未正确设置样式

我使用bootstrap作为UI的前端框架，目前，我正在尝试自定义CSS。除了一个小细节外，一切正常：

不知道为什么会这样。我认为这是所述链接的

：active

属性，但是，当我尝试应用

：active

css规则时，它没有得到修复。以下是html和css：

<nav class="navbar navbar-SwitchHon navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#SwitchHon-main-navbar">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="img/brand-switchhon.png"></a>
                </div>
                <div class="collapse navbar-collapse" id="SwitchHon-main-navbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><i class="fa fa-users"></i> Inicio</a></li>
                        <li><a href="#"><i class="fa fa-newspaper-o"></i> Productos y Servicios</a></li>
                        <li><a data-toggle="modal" data-target="#modalContact"><i class="fa fa-envelope-o"></i> Contactanos</a></li>
                        <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
                    </ul>
                </div>
            </div>
        </nav>

---

我相信这一定是一个简单的解决办法，但我似乎找不到它。任何帮助都将不胜感激！我希望它保持与您在其上悬停时相同的方式

该背景色实际上出现在

：focus

状态上

以下是默认引导样式表中的相关选择器：

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}

因此，您可以使用不同的

背景色覆盖它：


..或使其透明

：

.navbar .nav > li > a:focus {
  background-color: transparent;
}

---

你会做小提琴吗？帮助快速地调试它，这是我不知道的。非常感谢，它很有魅力。应用了修复程序。我会尽快回答。

.navbar .nav > li > a:focus {
  background-color: rgba(44, 62, 80, 0.4);
}

.navbar .nav > li > a:focus {
  background-color: transparent;
}