I am a newbie to CSS. I found some code that I manipulated to work with my images and it almost worked. I just want my navigation to have a hover and an active state. No matter what I try I can’t seem to get the active state to remain ‘on’. The code I originally found use ‘a:selected’ - which worked on one page and one page only. I see no other signs of ‘selected’ anywhere but I have tried many combnations and still can’t get it to work. Any help would be greatly appreciated.

Here’s my a snippet of my CSS and my HTML. For whatever reason the HTML code is not showing everything I pasted. I have a link with ‘class=“active” after the <li> and before the </li>

CSS
/* NAVIGATION */
ul {
background-image:url(../images/btb-type.gif);
background-repeat: no-repeat;
width: 237px;
height: 472px;
list-style: none;
margin: 0px;
padding: 0px;
position: absolute;
left: 830px;
}

li.bio a {
display: block;
width: 237px;
height: 21px;
margin-top: 100px;
background: url(../images/bio_duo.gif);
}

/* HOVER */
li.bio a:hover { background-position: -236px; }

/*ACTIVE */
li.bio a:active { background-position: -236px; }

/* VISITED */
li.bio a:visited { background-position: -236px; }

/* Selected */
li.bio a:selected { background-position: -236px; }

HTML
<ul>
<li class=“bio”></li>
</ul>

THANK YOU