a: hover non funziona, con bootstrap

Question

Quindi, per qualche motivo, il mio hover CSS non funziona. Sto usando bootstrap con alcuni dei loro css. C'è qualcosa di sbagliato nel mio codice, o è perché il codice di bootstrap sta scavalcando il mio?

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

È perché lo stile di default è Bootstrap more specific.

Questi sono i selettori che è necessario eseguire l'override:

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

Pertanto è possibile utilizzare:

Working Example Here

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

Answer 2

Senza vedere esattamente che cosa sta succedendo, il problema sei avere potrebbe essere correlato a non specificare una classe sul tuo elenco non ordinato.

Questo potrebbe risolvere il problema:

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

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