title: Change Bootstrap Header Link color on hover
body: <p>I have tried all my efforts to solve this simple problem but I can't figure out why it doesn't work.
  The code for header is </p>
  
  <pre><code>/*-- header --*/
  .header{
      padding: 1em 0;
      background: url(../images/header-bg.png) no-repeat 0px 0px;
      background-size: 27% 100%;
      margin-top:0px;
  }
  .logo{
      float:left;
      margin-top:0.5em;
  }
  span.menu{
      display:none;
  }
  .top-nav{
      float:right;
  }
  .top-nav ul{
      margin:0;
      padding:0;
  }
  .top-nav ul li{
      display:inline-block;
  }
  .top-nav ul li a{
      text-transform:uppercase;
      font-weight:700;
      color:#2C3E50;
      margin:1em 1.3em;
      display:inline-block;
      text-decoration:none;
  }
  .top-nav ul li a:hover,.top-nav ul li.active a{
      color:#f22b2b;
  }
  
  
  
   &lt;style&gt;
          #navtopbar {
              background-color: #ffffff;
          }
          }
  &lt;/style&gt;
  
  &lt;div class="nav navbar-fixed-top" id="navtopbar"&gt;
       &lt;div class="container-fluid"&gt;
                      &lt;div class="top-nav"&gt;
                          &lt;button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;span class="menu"&gt; &lt;/span&gt;
                          &lt;div class="navbar-collapse collapse"&gt;
                              &lt;ul&gt;
                                  &lt;li id="linkcolor" class="active"&gt;&lt;a href="~/index/index"&gt;Home&lt;/a&gt;&lt;/li&gt;
                                  &lt;li id="linkcolor"&gt;&lt;a href="~/Index/AboutUs"&gt;About&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="~/Doctor/Index"&gt;Doctors&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="~/Hospitals/Index"&gt;Hospitals&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="~/Clinics/Index"&gt;Clinics&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="~/Home/Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
                              &lt;/ul&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The color it displays on active and on hover is blue by default. I want to change it to red. In css it is </p>
  
  <pre><code>.top-nav ul li a:hover,.top-nav ul li.active a{
      color:#f22b2b;
  </code></pre>
  
  <p>But still it shows blue. So i try to overwrite the css by inline styling.</p>
  
  <p>I have tried <code>.nav &gt; li &gt; a {color: red}</code> or <code>.navbar-collapse &gt; ul &gt; li &gt; a {color: red}</code> or <code>.nav &gt; li {color:red}</code> or <code>.nav &gt; li &gt; a:hover{color:red;}</code> or <code>ul.nav a:hover, ul.nav a:focus, ul.nav a:active { color:red; }</code>
  No one is working for me. Please suggest where am I doing the mistake?</p>
  
  <p>PS: screen shot also attached<a href="https://i.stack.imgur.com/g3DVw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g3DVw.png" alt="enter image description here"></a></p>