Contorno dei link

[Alej]

Ciao a tutti. Non capisco perché quando clicco sulla voce di un menu con questa struttura:

<div class="menu"><ul id="nav">
					[*]ciao
					[*]ciao2
					[*]ciao3[/list]</div>

e relativo css:

.menu {padding:10px;}
.menu ul {height: 48px;list-style-type: none;}
.menu ul li {float: left;height: 48px;padding:0 18px 0 0;}
.menu ul li a { display: block; height: 48px;text-indent:-9999px; }
.menu ul li a.ciao { background: url(../images/ciao.gif) no-repeat left top; width: 78px; }
.menu ul li a.ciao2 { background: url(../images/ciao2.gif) no-repeat left top; width: 91px; }
.menu ul li a.ciao3 { background: url(../images/ciao3.gif) no-repeat left top; width: 77px; }}
.menu ul li a:hover { background-position: left bottom }

appare una specie di rettangolo che inizia da sinistra fino alla fine del "tassello" che ho cliccato.

Spero di essermi spiegato. Vi ringrazio anticipatamente dell'aiuto.
Buona serata.

[Alej]

Penso che sia per il text-indent:9999px ...ma non so...come posso fare per togliere quella brutta selezione?

[Xinod]

.menu ul li a:focus {outline-style:none;}

[Alej]

Grazie mille