Bonjour à tous !

Je me suis lancé dans la création d'un site et en ce moment je travaille sur le menu de navigation.

Petite originalité, je souhaite utiliser des images pour chacun des éléments du menu au lieu de texte. De plus l'une des catégories contient des sous catégories qui sont elles aussi des images.

N'étant pas sûr d'être très clair voici mon code afin d'illustrer mon propos :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="nav">
  <ul> 
    <li><a href="#"><img src="img/icone1.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone2.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone3.png" width="50" height="50" /></li></a>
  <ul>
    <li><a href="#"><img src="img/icone3-1.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone3-2.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone3-3.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone3-4.png" width="50" height="50" /></li></a>
  </ul>
    <li><a href="#"><img src="img/icone4.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone5.png" width="50" height="50" /></li></a>
  </ul>
  <br/><hr>
</div>

Je cherche maintenant à mettre ça en page avec du CSS. J'ai cherché sur plusieurs site, tutos, j'ai testé plusieurs choses mais ça n'a jamais fonctionné comme je le souhaite.

J'aimerais aligner le menu à l'horizontal (pas de problème pour ça ) puis que les images du sous menu (icone3-1, icone3-2, icone3-3, icone3-4) se cachent sous l'image du menu (icone3) et quelles apparaissent à la verticale sous l'icone 3 lorsque je passe la souris sur celle-ci.

Quelqu'un pourrait-il me donner un coup de main au niveau du CSS ?

Merci d'avance pour vos réponses et votre aide !