悬停另一个菜单项时如何隐藏活动的引导程序菜单项的底部边框

Question

我知道我可以通过删除活动类来使用javascript，但是我打算通过css而不使用javascript。 详细说明一下：想法是，当底部边框显示在屏幕上时，如果我将“主页”作为活动页面并且将鼠标悬停在“关于我们”上 同时“关于我们”隐藏在“首页”上。现在发生的是，两者都显示了（活动菜单项的边框和悬停的菜单项的边框。

到目前为止，我有此代码：

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus {
border-bottom:4px solid #B20000;
}


.navbar-default .navbar-nav > li > a:hover{
    color: #333;
    border-bottom: 4px solid red;
}


/*This line is not working*/
.navbar-default .navbar-nav > a:hover.active > a {
    border-bottom-color: transparent;
}