<li> -> Problème de l'espacement vertical

Bonjour, alors tout d'abord merci pour ceux qui se penche sur mon cas :)

Donc, Je dois faire un site pour une association (je suis stagiaire), et je me trouve face à un petit problème d'affichage:

J'ai fais un menu (horizontal ) avec les balises <ul> et <li> et dans les <li> il y'a un autre menu déroulant (qui déroule vers le bas) lors du passage de la souris sur celui-ci. Mon problème est que les img (le menu est fait d'image uniquement) dans les sous menu, il y'a un espace entrent eux que je voudrais supprimer.


Voici mon code:

(il est grandement possible qu'il y'a des erreurs dans le CSS ou encore les balises <br> dans le html, sans, il n'y a pas de saut automatique entre les <li> du sous menu ...)




<div class=\"menu\">

<ul>

<li><img src=\"chemin\"/>

<ul class=\"niveau2\">
<li><img src=\"cheminImageSousMenu\"/></li><br>
<li><img src=\"cheminImageSousMenu\"/></li>

</ul>

</li>
<li><img src=\"chemin\"/>
<ul class=\"niveau2\">
<li><img src=\"cheminImageSousMenu\"/></li><br>
<li><img src=\"cheminImageSousMenu\"/></li>

</ul>
</li>
</ul>

Voici mon code CSS associé

ul {
list-style-type: none;
margin :0 auto;
border-width: 0;
padding : 0;
}
ul ul {
display: none;
list-style-type: none;
margin :0 auto;
border-width: 0;
padding : 0;
}
.menu li:hover ul.niveau2{

display:block;
margin :0;
position: absolute;
}
.menu li {
list-style-type: none;
padding : 0;float: left;
}

Merci d'avance pour vos réponses !