hyperlink tag active state not working

Question

whenever i've tried using the hyperlink/anchor tag active state, it doesn't work. even if i click on the link, it should show it as in active state, but there's no effect. is there something i'm missing?

this is a basic example-

html:

             <ul>
                <li><a class="main" href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
                <li><a>Search</a></li>
                <li><a href="">RSS Feed</a></li>

             </ul>   

         </div>

css:

#navigation ul li  a:hover, #navigation ul li  a:focus, #navigation ul li  a:active  {
                color: #FFF;        
                border: 1px solid #B20000;
                border-top: 2px solid #B20000;
                padding: 15px 6px 6px 6px;
                background: #660000;
                -moz-transition: color 1s ease; 
                -o-transition: color 1s ease; 
                -webkit-transition: color 1s ease; 
                transition: color 1s ease;      
                text-shadow: 0 0 0.2em #D5E3E7, 0 0 0.2em #D5E3E7;

        }

Answer 1

There is no effect because you are using the same CSS styles for both states of the links:

a:hover
a:active

You should set different CSS styles for them to see the change in style. For example:

#navigation ul li a{
  color:#0000ff;
}

#navigation ul li a:hover{
  color:#ff0000;
}

Answer 2

To achieve your desired effect, you should pass a site-wise variable containing value of which link is active, and on page load, retrieve the variable, compare with navigational links and if they match, then apply active class or something.

For css :active is used for showing link which is pushed at the exact moment, not which link is active site-wise.

Can be easily achieved with server-side languages (like PHP), but I have no idea if it can be achieved with client-side languages (like JavaScript), if so, I'd love to see an answer about it too.

Answer 3

Yeah, you need a completely different style for your hover and active states to see any changes that will occur, try:

a:hover { color: blue; text-decoration: underline; }
a:active { color: black; text-decoration: none; }

That should enable you to see what's going on.