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


codice:
<div class="menu"><ul id="nav">
					[*]ciao
					[*]ciao2
					[*]ciao3[/list]</div>
e relativo css:

codice:
.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.