Question

I have a list menu in Asp.net MVC Razor engine Masterpage. While trying some CSS on the menu, i see that the a:active property doesn’t work as it should. I have cross check for reference on w3schools but still can’t figure it out.

Following is the HTML on master page :-

<div class="nav">
   <ul>
      <li><a href="/Store/Electronics">Electronics</a></li>
      <li><a href="/Store/Computers">Computers</a></li>
      <li><a href="/Store/Clothings">Clothing And Accressories</a></li>
      <li><a href="/Store/Office">Office</a></li>
      <li><a href="/Store/Sports">Sports</a></li>
   </ul>
</div>

Here’s the CSS code :-

.nav ul li a:link { text-decoration:none; color:#3C7777; font-weight:bold; }
.nav ul li a:visited { text-decoration:none; color:#3C7777; } 
.nav ul li a:hover { text-decoration: underline; color: #B5B5B5; }
.nav ul li a:active { text-decoration:none; color:#B5B5B5; }

Question :- The selected link is not show in the correct color, #B5B5B5, Why ??

Answer 1

Just to make sure you’re not missing something – The :active pseudo-class only applies while you are clicking the link, and holding down the mouse button. It will not work after a page reload. (Just making sure, as it’s a common mistake to make)