Problemas con Menú Vertical en Css

[riera_horacio]

Buenas tengo un problema con mi menú y quisiera saber si pueden ayudarme. He intentado varias opciones pero no logro solucionar el problema de espacio en los puntos que poseen submenus. Coloco el Código Css y Html para ver si pueden darme una mano. Gracias !!

[riera_horacio]

Este es el codigo Css:

#menu {
margin:0;
text-align:center;
width:200px;
height:693px;
background-color:#BCD3C3;
float:left;
}

#menu ul {margin:0; list-style:none; text-align:center; padding:0; background:#BCD3C3;}
#menu ul ul{background: #BCD3C3; white-space:nowrap;}

#menu li {list-style:none;}
#menu li {display:inline-block;display:inline;}


#menu ul {position:relative; left:-9999px;} /* AQUI SOLUCIONA PARTE DEL PROBLEMA */

#menu ul.level1 {position:relative; left:0px; width: 200px; line-height: 5px;}

#menu ul.level2 {width: 300px;}

#menu a {display:block; font: bold 12px verdana, arial; color:#000; text-decoration:none; padding:4px 20px 4px 10px;}

#menu ul li:hover > ul {visibility:visible; left:100%; margin-top:-21px; margin-left:-1px;}

#menu a:hover ul,
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}

#menu li a:hover {background:#E3F6CE;}
#menu li:hover > a {background: #E3F6CE;}
#menu li a.fly {background: url(flecha.gif) no-repeat right top;}
#menu li a.fly:hover {background:#E3F6CE url(flecha.gif) no-repeat right top;}
#menu li:hover > a.fly {background:#E3F6CE url(flecha.gif) no-repeat right top;}

[riera_horacio]

Y este es el utilizado en Html:

<div id="menu">

<table class="table2" cellpadding="10">
<tr class ="colorazul"> <!--Fondo AZUL de MENU -->
<td>
<table width="183" border="0" cellspacing="2" cellpadding="2">
<tr>
<td class="fontdos">
<span>MENU</span>
</td>
</tr>
</table>
</td>
</tr>
</table>

<ul class="level1">
<li><a href="#url">Institución</a></li>
<li><a href="#url">Internos</a></li>
<li><a class="fly" href="#url">Seguridad Ciudadana<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Influenza y H1N1 (Gripe Porcina)</a></li>
<li><a href="#url">Dengue</a></li>
<li><a href="#url">Prevención Ataques Sexuales</a></li>
<li><a href="#url">Robo Domiciliario / Robo Vehículos</a></li>
<li><a href="#url">Secuestro</a></li>
<li><a href="#url">Estupefacientes </a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">Empleo<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Puestos Vacantes</a></li>
<li><a href="#url">Requisitos para Postulantes</a></li>
<li><a href="#url">Beneficios</a></li>
<li><a href="#url">Pasantías</a></li>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</ul>
</li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a class="fly" href="#url">Decretos / Leyes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">Contactos</a></li>
</ul>
</div>

[riera_horacio]

Iniciado por riera_horacio

Buenas tengo un problema con mi menú y quisiera saber si pueden ayudarme. He intentado varias opciones pero no logro solucionar el problema de espacio en los puntos que poseen submenus. Coloco el Código Css y Html para ver si pueden darme una mano. Gracias !!

[omarMusic]

Pues en la parte q dice:

#menu ul {position:relative; left:-9999px;} /* AQUI SOLUCIONA PARTE DEL PROBLEMA */

cambialo por position:absolute

Suerte!!

[riera_horacio]

Muchas Gracias !! por lo menos desaparecio el espaciado, ahora veo tema de color de fondo y otras pequeñas cosas, ese cambio funciono sin problema !!

[riera_horacio]

#menu li a:hover {background:#E3F6CE;}
#menu li:hover > a {background: #E3F6CE;}
#menu li a.fly {background: url(flecha.gif) no-repeat right top;}
#menu li a.fly:hover {background:#E3F6CE url(flecha.gif) no-repeat right top;}
#menu li:hover > a.fly {background:#E3F6CE url(flecha.gif) no-repeat right top;}

Quisiera consultarles, porque no despliega la fecha.gif donde tiene submenu?