不悬停时无法删除引导选项卡css？

我正在尝试将引导选项卡与我自己的CSS一起使用，除了一个我无法理解的小错误外，它大部分都工作得很好。每当我点击一个标签，然后停止在它上面悬停（但不要点击其他任何东西），它就会在该标签上显示原始的css标签背景。我尝试过改变每个元素的背景/边框，但似乎没有什么能阻止这种情况的发生。（我的代表还不够高，无法嵌入图像！）。另一个注意事项是，这个问题在Safari中不会发生

以下是我的Html和Css：

CSS:

.postTeamBytes {
    background-color: #EDF6F9;
    margin-bottom: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #777;
    border-radius: 1px;
}

.postTeamBytes .nav li {
    height: 50px;
    margin-left: 10px;
    display: inline;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.postTeamBytes .nav li:hover{
    border: none;
}

.postTeamBytes .nav li:active{
    border: none;
}

.postTeamBytes .nav {
    border: none;
}

.postTeamBytes .nav:hover {
    border: none;
}

.postTeamBytes .nav:active {
    border: none;
}

.postTeamBytes .nav .active a {
    margin-top: -10px;

    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #333;
    font-weight: 300;
    height: 50px;
    outline: 0;
}

.postTeamBytes .nav li a {
    margin-top: -5px;

    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #333;
    font-weight: 300;
    height: 50px;
}

.postTeamBytes .nav .active {
    background-color: #EDF6F9;
    height: 40px;
    margin-top: 5px;
}

.nav-tabs {
    background: none;
}

.nav-tabs > li > a:hover{
    border: none;
    background: none;
}

.postTeamBytes .nav a {
    background: none;
    border: none;
    color: #333;
}

.postTeamBytes .nav a:hover {
    background: none;
    border: none;
    color: #FFF;
}

.postTeamBytes .nav .active a {
    background: none;
    border: none;
    color: #52ABC6;
}

.postTeamBytes .nav .active a:hover {
    background: none;
    border: none;
    color: #52ABC6;
}

.postTeamBytes .nav .active a:active:hover {
    background: none;
    border: none;
    color: #52ABC6;
}

.postTeamBytes .nav {
    height: 50px;
    background-color: #A8D5E2;
 }

.postTeamBytes .nav-tabs {
    height: 50px;
    border: none;
}


HTML:

<div class="postTeamBytes">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#byteTab">BYTE</a></li>
                <li><a data-toggle="tab" href="#eventTab">EVENT</a></li>
                <li><a data-toggle="tab" href="#challengeTab">CHALLENGE</a></li>
            </ul>
</div>

CSS:
.postTeamBytes{
背景色：#EDF6F9；
边缘底部：10px；
边框样式：实心；
边框宽度：1px；
边框颜色：#777；
边界半径：1px；
}
.postTeamBytes.nav li{
高度：50px；
左边距：10px；
显示：内联；
填充顶部：10px；
左侧填充：10px；
右边填充：10px；
}
.postTeamBytes.nav li:悬停{
边界：无；
}
.postTeamBytes.nav li:活动{
边界：无；
}
.postTeamBytes.nav{
边界：无；
}
.postTeamBytes.nav:悬停{
边界：无；
}
.postTeamBytes.nav:活动{
边界：无；
}
.postTeamBytes.nav.active a{
利润上限：-10px；
字体系列：“Lato”，无衬线；
字体大小：15px；
颜色：#333；
字体大小：300；
高度：50px；
大纲：0；
}
.postTeamBytes.nav li a{
页边顶部：-5px；
字体系列：“Lato”，无衬线；
字体大小：15px；
颜色：#333；
字体大小：300；
高度：50px；
}
.postTeamBytes.nav.active{
背景色：#EDF6F9；
高度：40px；
边缘顶部：5px；
}
.导航标签{
背景：无；
}
.nav选项卡>li>a:悬停{
边界：无；
背景：无；
}
.postTeamBytes.nav a{
背景：无；
边界：无；
颜色：#333；
}
.postTeamBytes.nav a:悬停{
背景：无；
边界：无；
颜色：#FFF；
}
.postTeamBytes.nav.active a{
背景：无；
边界：无；
颜色：#52ABC6；
}
.postTeamBytes.nav.active a:悬停{
背景：无；
边界：无；
颜色：#52ABC6；
}
.postTeamBytes.nav.active a:active:悬停{
背景：无；
边界：无；
颜色：#52ABC6；
}
.postTeamBytes.nav{
高度：50px；
背景色：#A8D5E2；
}
.postTeamBytes.nav选项卡{
高度：50px；
边界：无；
}
HTML:

---

谢谢

您需要更改的属性是.nav tabs>li.active>a、.nav tabs>li.active>a:hover、.nav tabs>li.active>a:focus

所以。。。试一试

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus.
{
  background-color:transparent !important;
  border: none !important;
  // whatever else you need to style
}

去看看我的