[Resolvido] Quando passar o mouse na última exibir a primeira no

Tenho um sistema de avaliação que vou colocar umas estrelas (de 1 a 5) para dar as notas onde até agora já fiz a configuração para quando eu passar o mouse em cima da estrela ela aparece cheia e quando tiro ela volta a ficar vazia. Só que aí vem a dúvida:

Como faço para fazer ao passar o mouse por cima da quinta estrela as outras quatro ficarem mostrando também e como fazer com AJAX para enviar para o banco de dados o id da página e a nota referente a estrela ao clicar nela?

Código CSS das estrelas:

<style>
 #menus ul {
 list-style-type: none;
 clear: both;
 height: 34px;
 padding-top: 10px;
	}
 #menus ul li {
 float: left;
 padding-right: 2px;
 }
 #menus ul li a {
 display: block;
 color: #ffffff;
 font-weight: bold;
 font-size: 0.9em;
 text-transform: uppercase;
 text-decoration: none;
 text-align: center;
 padding: 10px 15px 21px;
 background: url(images/starrating_empty.gif) no-repeat;
 }
 #menus ul li a:hover, #menus ul li.here a {
 background-image: url(images/starrating.gif);
 }
</style>

<div class="menus" id="menus">
 <ul>
 <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li>
 </ul>
 <p><strong>Votos: 2</strong></p>
 </div>