Как скрыть нижнюю границу активного пункта меню начальной загрузки при наведении на другой пункт меню

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