menu desplegable CSS

[lissette22]

Hola,

Estoy haciendo un menú desplegable solo con css, y cuando despliego el texto de contenedor se desplaza un poco hacia abjao, y no logro entender porque. os dejo aki lo que tengo del menu

<!-- Menu principal -->
<div id="menu">
<ul>
<li class="nivel1"><a id="activo" href="#" class="nivel1"><span id="activo">Inicio</span></a></li>
<li class="nivel1"><a href="#" class="nivel1"><span>¿Quienes somos?</span></a>
<ul>
<li><a href="#"><span>Origen</span></a></li>
<li><a href="#"><span>Ubicaci&oacute;n</span> </a></li>
<li><a href="#"><span>Misi&oacute;n y objetivos</span></a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1"><span>Asociaci&oacute;n</span></a>
<ul>
<li><a href="#">Listado de asociados</a></li>
<li><a href="#">Buscar comercios</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1"><span>Servicios</span></a>
<ul>
<li><a href="#">Formaci&oacute;n</a></li>
<li><a href="#">Asesoramiento</a></li>
<li><a href="#">Ayudas y subvenciones</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1"><span>Hazte Socio</span></a>
<ul>
<li><a href="#">Ser socios</a></li>
<li><a href="#">Ventajas</a></li>
<li><a href="#">¿Como hacerse socios?</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel1"><span>Noticias</span></a>
<ul>
<li><a href="#">Noticias más importantes</a></li>
<li><a href="#">Últimas noticias</a></li>
<li><a href="#">Foro</a></li>
</ul>
</li>
</ul>
</div> <!-- /menu principal -->

#menu ul li a{
padding: 0 0.5em;
text-decoration: none;
}

div#menu {
left:205px;
position:relative;
top:-32px;
}

div#menu li.nivel1 {
margin-right:4px;
font-weight:bold;
}

div#menu li a {
padding: 11px 0px 10px 10px;
text-decoration: none;
line-height:35px;
}
div#menu li a span {
padding: 11px 12px 10px 0px;
color:#000000;
}

div#menu li a#activo, div#menu li a:hover {
background: transparent url(imagenes/menu_izq.png) no-repeat;
}
div#menu li span#activo, div#menu li span:hover {
background: transparent url(imagenes/menu_der.png) repeat-y right top;
color:#AA1428;
}

div#menu li ul {
display: none;
}
div#menu ul li a:hover ul, div#menu ul li:hover ul {
display: block;
position: relative;
left: 0px;
}
div#menu ul li ul{
background: transparent url("imagenes/menu_desplegable.png") no-repeat;
width: 165px;
padding: 0px 0px 10px 0px;

}
div#menu li li a {
background: none;
}

div#menu ul li ul span{
background: transparent url("imagenes/menu_nivel2_linea.png") no-repeat;
}
div#menu li:hover ul {
left: 0px;
z-index: 100;
}