title: Mvc ActionLink HighLight Color
body: <p>I have a problem with Actionlink Highlight color where on Navbar.
  I am using bootstrap for styling and i identified a navbar style like that in bootstrap.css file:</p>
  
  <pre><code>.navbar-custom {
    background-color: #e74c3c;
    border-color: #c0392b;
  }
  .navbar-custom .navbar-brand {
    color: #ecf0f1;
  }
  .navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus {
    color: #ffbbbc;
  }
  .navbar-custom .navbar-text {
    color: #ecf0f1;
  }
  .navbar-custom .navbar-nav &gt; li &gt; a {
    color: #ecf0f1;
  }
  .navbar-custom .navbar-nav &gt; li &gt; a:hover, .navbar-custom .navbar-nav &gt; li &gt; a:focus {
    color: #ffbbbc;
  }
  .navbar-custom .navbar-nav &gt; li &gt; .dropdown-menu {
    background-color: #e74c3c;
  }
  .navbar-custom .navbar-nav &gt; li &gt; .dropdown-menu &gt; li &gt; a {
    color: #ecf0f1;
  }
  .navbar-custom .navbar-nav &gt; li &gt; .dropdown-menu &gt; li &gt; a:hover,
  .navbar-custom .navbar-nav &gt; li &gt; .dropdown-menu &gt; li &gt; a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
  .navbar-custom .navbar-nav &gt; li &gt; .dropdown-menu &gt; li &gt; .divider {
    background-color: #e74c3c;
  }
  .navbar-custom .navbar-nav &gt; .active &gt; a, .navbar-custom .navbar-nav &gt; .active &gt; a:hover, .navbar-custom .navbar-nav &gt; .active &gt; a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
  .navbar-custom .navbar-nav &gt; .open &gt; a, .navbar-custom .navbar-nav &gt; .open &gt; a:hover, .navbar-custom .navbar-nav &gt; .open &gt; a:focus {
    color: #ffbbbc;
    background-color: #c0392b;
  }
  .navbar-custom .navbar-toggle {
    border-color: #c0392b;
  }
  .navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus {
    background-color: #c0392b;
  }
  .navbar-custom .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
  }
  .navbar-custom .navbar-collapse,
  .navbar-custom .navbar-form {
    border-color: #ecf0f1;
  }
  .navbar-custom .navbar-link {
    color: #ecf0f1;
  
  }
  .navbar-custom .navbar-link:hover {
    color: #ffbbbc;
  }
  
  @media (max-width: 767px) {
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; li &gt; a {
      color: #ecf0f1;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; li &gt; a:hover, .navbar-custom .navbar-nav .open .dropdown-menu &gt; li &gt; a:focus {
      color: #ffbbbc;
    }
    .navbar-custom .navbar-nav .open .dropdown-menu &gt; .active &gt; a, .navbar-custom .navbar-nav .open .dropdown-menu &gt; .active &gt; a:hover, .navbar-custom .navbar-nav .open .dropdown-menu &gt; .active &gt; a:focus {
      color: #ffbbbc;
      background-color: #c0392b;
    }
  }
  </code></pre>
  
  <p>Cshtml:</p>
  
  <pre><code>   &lt;div class="navbar-custom container"&gt;
          &lt;div class="container"&gt;
              &lt;div class=" navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-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;
                  @Html.ActionLink("FluffyMunchies", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
  
                      &lt;li&gt;@Html.ActionLink("Ana Sayfa", "Index", "Home")&lt;/li&gt;
                      &lt;li role="presentation" class="dropdown"&gt;
                          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;
                              Ürünler &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;ul class="dropdown-menu" aria-labelledby="Products"&gt;
                              &lt;li&gt;@Html.ActionLink("Cupcakes", "CupCakes", "Home")&lt;/li&gt;
                              &lt;li&gt;@Html.ActionLink("Özel Günler", "SpecialDays", "Home")&lt;/li&gt;
                              &lt;li&gt;@Html.ActionLink("Paket Seçenekleri", "Packages", "Home")&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Hakkında", "About", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("İletişim", "Contact", "Home")&lt;/li&gt;
  
  
                  &lt;/ul&gt;
  
                  &lt;div class="navbar-right pSet"&gt;
                      &lt;a class="btn btn-social-icon btn-facebook" href="https://www.facebook.com/fluffymunchiescupcakes" target="_blank"&gt;
                          &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;a class="btn btn-social-icon btn-instagram" href="https://instagram.com/fluffymunchies" target="_blank"&gt;
                          &lt;i class="fa fa-instagram"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  
                  @Html.Partial("_LoginPartial")
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So; ActionLinks highlight color are gray. But; it should be red.
  What is the problem?
  My reference site is: <a href="http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0" rel="nofollow">http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0</a></p>