Menu con Listas

Hola a todos.

Tengo un problema que creia sencillo pero que llevo dandole vueltas toda la tarde y ya no se donde buscar.

Estoy haciendo un menu desplegable con imagenes en vertical. Es decir tengo 3 imagenes grandes, al poner el cursor en una de ellas se desplegan una serie de imagenes mas que seran los enlaces para navegar por la pagina.

Problema numero 1. No se porque, las imagenes me salen separadas unas de otras, incluso con separaciones diferentes, supuse que con "line-height" podria arreglarlo, pero no he visto cambio, o quizas es que no lo he puesto en el sitio correcto.

Problema numero 2. Me gustaria que las imagenes desplegables se alinearan a la misma altura que las 3 imagenes grandes. Dado que por problemas de capas si las imagenes se desplazan hacia el lateral quedan parcialmente ocultas. He utilizado el padding y el margin a 0 para intentar alinearlas, pero tampoco lo he conseguido. Ya no se si es que lo pongo donde no toca, si me dejo algo o que.

Os pongo una imagen (Que vale mas que mil palabras) para que veais como esta actualmente. La primera parte es como esta el menu "cerrado" y despues como esta desplegado con el cursos encima de comunidad exploradores



P.D.: Limpiando el codigo HTML he conseguido que todas las imagenes esten a la misma distancia, habia codigo basura que habia ido haciendo y no habia quitado. Aun asi, necesitaria ayuda para reducir la distancia que hay entre ellas.

Bien pues ahora el codigo HTML

Código HTML :

<div id="menuEX">
<ul class="menuEX">
<li><a href="#"><img src="images/Plantilla/bannercomunidad.jpg" border="0" /></a>
<ul>
<li><a href="#"><img src="images/Plantilla/Menu/quienessomos.jpg" border="0"  /></a></li>
<li><a href="#"><img src="images/Plantilla/Menu/librorojo.jpg" border="0" /></a></li>
<li><a href="#"><img src="images/Plantilla/Menu/organigrama.jpg" border="0"  /></a></li>
<li><a href="#"><img src="images/Plantilla/Menu/historia.jpg" border="0" /></a></li>
</ul>
</li>
<li><a href="#"><img src="images/Plantilla/bannergw2.jpg" border="0" alt="" /></a> 
<ul>
<li><a href="#">GW 1</a></li>
<li><a href="#">GW 2</a></li>
</ul>
</li>
<li><a href="#"><img src="images/Plantilla/Menu/logo eve.jpg" border="0" alt="" /></a>
<ul>
<li><a href="#">EVE 1</a></li>
<li><a href="#">EVE 2</a></li>
</ul>
</li>
</ul>
</div>

Y ahora el CSS lo mas sencillo para que funcione, con todo lo demás borrado.

Código CSS :

ul.menuEX
{
   list-style:none;
}
ul.menuEX ul 
{
   display:none;
   list-style:none;
}

ul.menuEX li:hover > ul
{
   display:block;
  }

Muchas gracias por leer el post.

lo que te hace falta es hacer un reset general en el css para que los estilos por defecto que tiene el navegador no pongan problema.

busca en google: "reset css".

Ya tenia resets css al inicio del documento. Asi que supongo que esa no seria toda la solucion al problema.

Me he pasado toda la noche probando combinaciones. La que mejor me ha quedado es añadir estas lineas al codigo css

Código CSS :

ul.menuEX li:hover ul > li
{
  margin-left: -8px;
  margin-top: 0px;
  margin-bottom: -2px;
  padding:0px;
}

me parece una solucion un poco chapucera, porque aun con los resets cada navegador me lo pilla de una forma. Mañana cuando este mas descansado pongo algo mas. Ahora me voy a la cama.

Muchas gracias por la respuesta.