"Vote par étoiles" en CSS

Bonjour à tous, attention mon problème est pas évident à comprendre, et encore moins à expliquer,

En ce moment je triture un système de vote par étoiles présenté sur ce lien : http://www.komodomedia.com/blog/2006...ing-part-deux/

Pour ceux qui auraient la flemme de lire (je peux comprendre, en anglais en plus!), il s'agit d'un système basé sur les <ul>, les <li> et les <a> qui joue avec les z-index, les hovers et les left pour "remplir" les étoiles en réaction au passage de la souris.

Mais un point m'échappe.

J'ai souhaité adapté la logique de ce procédé à un système basé sur des div car je n'ai pas besoin des liens <a>: dans mon projet je souhaite que l'utilisateur vote plusieurs fois par le biais de plusieurs "barres d'étoiles" (sur différents sujets de vote) pour finalement valider l'ensemble (des votes donc) une seule fois. Je vais donc rajouter un peu de Javascript en fin de compte mais ma question n'est pas à ce niveau.

Ma question est qu'apparemment si je "float: left" des balises <li> et que je les mets en"left: 0px", alors elles peuvent "s'entasser" (c'est ce qui est fait dans l'exemple du lien plus haut), seulement cela ne semble pas fonctionner avec des <div>:

Si j'ai 5 div de 30x30(px) alignés horizontalement par le biais de "float: left", et si je mets un "div:hover { left:0px }" sur le 3e par exemple, il restera collé à droite du second, et ne viendra pas tout à gauche, ce qui est pourtant ce que je souhaite!

Quelqu'un a compris mon problème? :oops:

Merci d'avance à ceux qui pourront m'aider!