Hola webmasters.
Tengo un menu desplegable (hacia la derecha) con submenus.
Ok, entonces lo que necesito hacer es que este menu se despliegue hacia abajo y no hacia el costado.
Es decir que al aparecer una subcategoria me empuje a las principales hacia abajo para dar lugar a las subcategorias superiores, me explico?
En vez de salir para el costado, quiero que salgan para abajo.
Este es el css:
Código:
* {
padding: 0px;
outline: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
html, body { width: 100%;}
body {
font-family: Verdana, arial,
helvetica, sans-serif;
height: inherit;
background-image: url(fondo.jpg);
}
#menues {
font-size: 0.7 em;
width: 225px;
float: left;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 0px;
}
#menues ul { list-style-type: None;}
#menues ul li.nivel1 { width: 220px;}
#menues ul li { text-align: Center;}
#menues ul li.primera { border-top: Solid 1px #fff;}
#menues ul li a {display: Block;text-decoration: None;color:
#000;background-color: #e6ecee;border: Solid 2px #9ac1c9;border-top: None;
padding: 8px 8px 9px;position: Relative;font-weight:bold;font-size:12px;
text-align:left;display:block;}
#menues ul li:hover {position: Relative;background-color: #399;color: #000;}
#menues ul li a:hover,
#menues ul li:hover a.nivel1 {background-color: #D2DFE3;
color: #000;position: Relative;}
#menues ul li a.nivel1 {display: Block!important;display: None;
position: Relative;}
#menues ul li ul {display: None;}
#menues ul li:hover > ul {display: Block;position: Absolute;left: 220px;
top:-1px;}
#menues ul li ul li a {width: 220px;background-color: #E6ECEE;
color: #000;position: Relative;}
#menues ul li ul li a:hover {position: Relative;background-color: #D7DFE2;
color: #000;}
#menues ul li a.nivel1ie {width: 220px;padding: 0px;}
#menues ul li a.subnivel {padding-bottom: 8px;}
#menues ul li a:hover ul.nivel2,
#menues ul.nivel2 li a:hover ul.nivel3,
#menues ul.nivel3 li a:hover ul.nivel4 {display: Block;position: Absolute;
left: 238px;top:-1px;}
table.falsa {border-collapse:collapse;border:0px;
float: Left;}
#col {margin: 0px;padding: 0px; outline: 0; height:100%}
Y dejo 2 categorias del menu:
Código:
<ul>
<li class="nivel1 primera" style="border-top:2px #9ac1c3 solid"><a href="#" class="nivel1">Controladores Fiscales</a>
<!--[if lte ie 6]><a href="#" class="nivel1ie">opción 1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid">
</li><li><a href="http://intersystem-arg.com/catalogo/controladores fiscales/registradoras fiscales/registradoras fiscales.html">Registradoras Fiscales</a></li>
<li><a href="http://intersystem-arg.com/catalogo/controladores Fiscales/impresores fiscales formato ticket/impresores fiscales formato ticket.html">Impresores formato ticket</a></li>
<li><a href="http://intersystem-arg.com/catalogo/controladores fiscales/impresores fiscales formato hoja/impresores formato hoja.html">Impresores formato hoja</a></li>
<li><a href="http://intersystem-arg.com/catalogo/controladores fiscales/centro integral de facturacion/centro integral de facturacion.html">Centro integral de facturación</a></li>
<li><a href="http://intersystem-arg.com/catalogo/controladores fiscales/puntos de venta fiscales/puntos de venta fiscales.html">Puntos de venta fiscales</a></li>
</ul>
<!--[if lte ie 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera"><a href="#" class="nivel1">Balanzas</a>
<!--[if lte ie 6]><a href="#" class="nivel1ie">L<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="http://intersystem-arg.com/catalogo/balanzas/presicion/presicion.html">Presicion</a></li>
<li><a href="http://intersystem-arg.com/catalogo/balanzas/peso/peso.html">Peso</a></li>
<li><a href="http://intersystem-arg.com/catalogo/balanzas/peso y calculo/peso y calculo.html">Peso y cálculo</a></li>
<li><a href="http://intersystem-arg.com/catalogo/balanzas/contadoras/contadoras.html">Contadoras</a></li>
<li><a href="http://intersystem-arg.com/catalogo/balanzas/con impresion de etiquetas/con impresion de etiquetas.html">Con impresion de etiquetas</a></li>
<li><a href="http://intersystem-arg.com/catalogo/balanzas/con impresion de ticket/con impresion de ticket.html">Con impresion de ticket</a></li>
<li><a href="http://intersystem-arg.com/catalogo/balanzas/con impresion ticket_etiqueta/con impresion ticket_etiqueta.html">Con impresion ticket/etiqueta</a></li>
<li><a href="http://intersystem-arg.com/catalogo/balanzas/basculas/basculas.html">Basculas</a></li>
<li><a href="http://intersystem-arg.com/catalogo/balanzas/rieleras/rieleras.html">Rieleras</a></li>
</ul>
<!--[if lte ie 6]></td></tr></table></a><![endif]-->
</li>
TENGO QUE MODIFICAR EL CSS PERO NO SE COMO YA QUE ME AYUDARON A ARMARLO Y NO SE QUE PARTE SE ENCARGA DE EL DESPLAZAMIENTO