a:active nao funciona

Olá galera sou nova com css e tenho uma duvida. Estou desenvolvendo um menu com imagens em css e nao estou conseguindo fazer com que o a:active funcione, ele deveria ficar igual o a:hover depois de clicado e permanecer enquanto a pessoa nao clicasse em outro botão. Consigo fazer direto pelo html pelo onclick e etc mas pelo css nao estou conseguindo. Por favor alguem me da uma luz.

Alem desse problema, a primeira vez que carrega a pagina parece que os botoes ficam piscando ai logo em seguida depois de carregar ja ficam normais. O que pode ser?

#botao{
	background:url(../img/bg.jpg);
	height:235px;
}
#menu{
	padding-top:10px;
	margin:0 auto;
	width:800px;
	height:30px;
}

#menu ul li{

	display:inline;
	list-style:none;

}

.home a{

	background:url(../img/home.png);
	width:116px;
	height:37px;
	float:right;
}

.home a:hover{

	background:url(../img/home-over.png);
	width:116px;
	height:37px;
	float:right;
}

.home a:active{

	background:url(../img/home-over.png);
	width:116px;
	height:37px;
	float:right;
}

<div id="menu">
<ul>
<li class="contato"><a href="#"></a></li>
<li class="galeria"><a href="#"></a></li>
<li class="servicos"><a href="#"></a></li>
<li class="empresa"><a href="#"></a></li>
<li class="home"><a href="teste.html"></a></li>
</ul>
</div>

o que estou fazendo de errado?