[Resolvido] Link active - continuar

Desculpe pelo titulo, mais não sabia o que colocar.

É o seguinte.Criei um filtro com links,porém ao selecionar um opção quero que ela continue marcada, não consegui desenvolver nada pra que isso aconteça.

HTML

<div id="filtro" title="filtrar por:">
 <ul>
 <li><a title="Todos" id="f-todos" href="#"></a></li>
 <li><a title="Chás" id="f-chas" href="#"></a></li>
 <li><a title="Ervas" id="f-ervas" href="#"></a></li>
 <li><a title="Grãos" id="f-graos" href="#"></a></li>
 <li><a title="Receitas" id="f-receitas" href="#"></a></li>
 </ul>
</div>

CSS

#filtro{
width:310px;
height:30px;
float:left;
margin-left:17px;
padding-left:80px;
background-image:url(images/filtro.png);
}

#filtro ul{

padding:0;
margin:3px;
background-color:#0000FF;
}

#filtro ul li{

padding:0;
margin-top:4px;
float:left;
list-style:none;
display:inline;
}

#filtro ul li a{

float:left;
border:0;
text-decoration:none;
}

#f-todos{
background-image:url(images/f-todos.png);
width:50px;
height:16px;
display:block;
}

#f-chas{
background-image:url(images/f-chas.png);
width:50px;
height:16px;
display:block;
}

#f-graos{
background-image:url(images/f-graos.png);
width:50px;
height:16px;
display:block;
}

#f-ervas{
background-image:url(images/f-ervas.png);
width:50px;
height:16px;
display:block;
}

#f-todos:hover{

background-position:0 -16px;
}

#f-ervas:hover{

background-position:0 -16px;
}

#f-graos:hover{

background-position:0 -16px;
}

#f-chas:hover{

background-position:0 -16px;
}

#f-receitas{
background-image:url(images/f-receitas.png);
width:65px;
height:16px;
display:block;
}

#f-receitas:hover{

background-position:0 -16px;
}

Imagem

Clique

Obrigado