a: hover не работает, с bootstrap

Question

Так что по какой-то причине мой hover CSS не работает. Я использую bootstrap с некоторыми из своих css. Что-то не так с моим кодом, или это потому, что код начальной загрузки переопределяет мой?

HTML

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav" role="tablist"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">About</a></li>   
    </ul> 
    </div> 
</nav> 

CSS

ul>li>a { 
    color: black; 
    padding: 15px; 
} 

ul>li>a:hover { 
    background-color: #B0B0B0; 
    color: red; 
} 

Answer 1

Это потому, что по умолчанию Bootstrap стилизации является more specific.

Эти селекторы, которые вам нужно переопределить:

.navbar-default .navbar-nav>li>a:hover, 
.navbar-default .navbar-nav>li>a:focus { 
    color: #333; 
    background-color: transparent; 
} 

Таким образом, вы можете использовать:

Working Example Here

.navbar-default .navbar-nav>li>a:hover { 
    background-color: #B0B0B0; 
    color: red; 
} 

Answer 2

Не видя точно, что происходит, вопрос вы может быть связано с тем, что вы не укажете класс в своем неупорядоченном списке.

Это может решить проблему:

ul.navbar-nav > li > a { 
color:black; 
padding: 15px; 
} 

ul.navbar-nav > li > a:hover { 
    background-color: #B0B0B0; 
    color:red; 
}