per affiancare le tre immagini la lista va bene
però di norma si applica un float:left agli elementi[*] e un clearing non strutturale (cerca nel forum) all'elemento lista <ul>

all'interno degli[*] non devi applicare alcuna regola particolare: assumendo che le immagini (normale e hover) abbiano uguali dimensioni ti basta solo inserirle all'interno di ciascun link <a>

di default la prima immagine all'interno del link sarà visibile, la seconda no
all'hover nascondi la prima e mostri la seconda
puoi farlo assegnando due classi distinte .img1 e .img2
codice:
<img class="img1"... /><img class="img2"... />

quindi
codice:
.img1 { display: block; }
.img2 { display: none; }

a:hover .img1 { display: none; }
a:hover .img2 { display: block; }