Foros del Web » Creando para Internet » CSS »

Problemas con Menú Vertical en Css

Estas en el tema de Problemas con Menú Vertical en Css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/05/2011, 14:51
 
Fecha de Ingreso: mayo-2011
Ubicación: Paraguay
Mensajes: 6
Antigüedad: 6 años, 6 meses
Puntos: 0
Problemas con Menú Vertical en Css

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 !!
  #2 (permalink)  
Antiguo 13/05/2011, 14:53
 
Fecha de Ingreso: mayo-2011
Ubicación: Paraguay
Mensajes: 6
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Problemas con Menú Vertical en Css

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;}
  #3 (permalink)  
Antiguo 13/05/2011, 14:53
 
Fecha de Ingreso: mayo-2011
Ubicación: Paraguay
Mensajes: 6
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Problemas con Menú Vertical en Css

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>
  #4 (permalink)  
Antiguo 13/05/2011, 15:30
 
Fecha de Ingreso: mayo-2011
Ubicación: Paraguay
Mensajes: 6
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Problemas con Menú Vertical en Css

Cita:
Iniciado por riera_horacio Ver Mensaje
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 !!
  #5 (permalink)  
Antiguo 13/05/2011, 16:56
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 6 años, 10 meses
Puntos: 10
Respuesta: Problemas con Menú Vertical en Css

Pues en la parte q dice:

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

Suerte!!
  #6 (permalink)  
Antiguo 13/05/2011, 18:27
 
Fecha de Ingreso: mayo-2011
Ubicación: Paraguay
Mensajes: 6
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Problemas con Menú Vertical en Css

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 !!
  #7 (permalink)  
Antiguo 15/05/2011, 13:23
 
Fecha de Ingreso: mayo-2011
Ubicación: Paraguay
Mensajes: 6
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Problemas con Menú Vertical en Css

#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?

Etiquetas: vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:11.