a:hover does not work, with bootstrap

So for some reason, my hover CSS is not working. I am using bootstrap with some of their css. Is there something wrong with my code, or is it because bootstrap’s code is overriding mine’s?

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

solution

It’s because the default Bootstrap styling is more specific.

These are the selectors that you need to override:

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

Therefore you could use:

Working Example Here

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