Comportamenti imprevisti con a:hover per effetti dhtml

[Cerebro]

Stavo aggeggiando con il selettore a:hover per giocare con dei layer da far apparire/nascondere per ottenere una specie popup orizzontale a scomparsa.

L'idea è: un contenitore e due DIV contenuti (A e B). Quando il mouse non è sopra il contenitore, si vede A, quando il mouse si posa si vede B.

Nel contenitore A (a riposo) stampo una frase del tipo "Vota >" e nel B inserisco 3 link per votare da 1 a 3.

E' vero che la stessa cosa si potrebbe fare in altri modi, ma mi sono intestardito con questo.

Il problema sorge quando inserisco nel codice HTML i 3 link. A quel punto scoppia tutto e il DHTML non funziona più. I 3 link sono visibili sin da subito senza bisogno di passare il mouse sopra il contenitore e lo sfondo del DIV A per giunta non si vede più. Boh.

html:

<a href="#" class="rate">
		<div class="rate-button">VOTA &gt;</div>
		<div class="rate-rates">1</div>
</a>

css:

a.rate { cursor:pointer; position:relative; font-family:verdana; font-size:10px; font-weight:bold; color:black; text-decoration:none; }
a.rate:hover { direction:ltr; }

a.rate .rate-button { visibility:visible;width:60px;height:22px;line-height:22px;background:url(img/but_rate.png) top left no-repeat;position:absolute;top:0;left:0; }
a.rate:hover .rate-button { visibility:hidden; }

a.rate .rate-rates { visibility:hidden;width:100px;height:22px;background-color:red;position:absolute;top:0;left:0; }
a.rate:hover .rate-rates { visibility:visible; }

Ho come il sentore che la definizione di a.rate interferisca con 1. Io do per scontato che un link dentro un DIV con visbility:hidden, sia anch'esso nascosto, ma mi sa che invece non è così.

[LineaPixel]

Hai provato semplicemente ad impostare anche gli altri stati del tag a?