title: a:hover does not work, with bootstrap
body: <p>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?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="collapse navbar-collapse"&gt;
      &lt;ul class="nav navbar-nav" role="tablist"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul&gt;li&gt;a {
      color: black;
      padding: 15px;
  }
  
  ul&gt;li&gt;a:hover {
      background-color: #B0B0B0;
      color: red;
  }
  </code></pre>