Why won't a:active work in sidebar widget?

Question

I have the following in my css:

.categories-widget li a:hover {
text-decoration: underline;
}

.categories-widget li a:active {
text-decoration: underline;
}

and this in my sidebar.php:

<h2 class="big">Categories</h2>
<ul class="categories-widget">
   <?php
   global $parent_id;
   wp_list_categories('show_count=1&title_li=&child_of='.$gateway_parent_id.'&show_count=0&hide_empty=0'); ?>
</ul>

The a:hover works, but not the a:active. Is there a reason for this? What can I do to fix it?

Answer 1

it wont work since you have:

.categories-widget li a:hover {
text-decoration: underline;
}

.categories-widget li a:active {
text-decoration: underline;
}

and the :active pseudo selector will match when an element is currently being pressed down on by the mouse cursor. so it is doing the same thing..

try :

.categories-widget li a:hover { text-decoration: underline; }

.categories-widget li a:active {
position:fixed;
padding-top:1px;
color:red;
}