Problemas con <ul><li></li></ul>

colote · #1 (**permalink**) 13/02/2009, 04:27

Hola gente, tengo una problemita con unas listas que estoy armando ...

El problema se me presenta en la 5ta lista anidada ...

Cuando despliego la 3º lista se me abre la 4ta y 5ta, en vez de la 4ta sola ...

O sea en mi ejemplo cuando abro, la solapa ACA EL PROBLEMA, se me muestra las solapas A y AA , en vez de solo A !!!

Tiene algun limite para anidar estas etiquetas ???

Saludos Ricardo !!!

Código HTML:

<ul id="navmenu-v"> <!-- UL PRINCIPAL-->
        <li><a href="#">1- Gestion VENTAS</a>
	<ul> <!-- UL GESTION VENTAS-->
		<li><a href="#">1- Pedidos y Presupuestos</a>
			<ul>
			<li><a href="#">1- Ingreso de Ped/Presup</a></li>
			<li><a href="#">2- Listado de Control</a></li>
			<li><a href="#">3- Listado de Control x Fecha</a></li>
			<li><a href="#">4- Listado de Pendientes</a></li>
			<li><a href="#">5- Art. Facturados aun pend.</a></li>
			<li><a href="#">6- Consulta de Entregas</a></li>
			<li><a href="#">7- Cantidades Presupuestadas</a></li>
			<li><a href="#">8- Art. Pendientes - Ped-Rem</a></li>
			<li><a href="#">9- Proyeccion Pago Comision</a></li>
			</ul>
		</li>
		<li><a href="#">2- Gestion de Remitos</a>
			<ul>
			<li><a href="#">1- Ingreso de Remitos</a></li>
			<li><a href="#">2- Listado de Control</a></li>
			<li><a href="#">3- Emision de Remitos</a></li>
			<li><a href="#">4- Estado de Remitos</a></li>
			<li><a href="#">5- Pendientes de Facturacion</a></li>
			<li><a href="#">6- Importacion de Remitos</a></li>
			</ul>
		</li>

		<li><a href="#">3- Facturacion</a>
			<ul>
			<li><a href="#">1- Ingreso de FACTURAS</a></li>
			<li><a href="#">2- Ingreso de NOTA DE DEBITO</a></li>
			<li><a href="#">3- Ingreso de NOTA DE CREDITO</a></li>
			<li><a href="#">4- Ingreso de RECIBOS</a></li>
			<li><a href="#">5- Emision de Comprobantes</a></li>
			<li><a href="#">6- Emision Remitos Pend. Impresion</a></li>
			<li><a href="#">7- Estado de las facturas</a></li>
			<li><a href="#">8- Estado de las Fact.Rem.Fact.</a></li>
			</ul>
		</li>
		
		<li><a href="#">4- Informes de Ventas</a>
			<ul>
			<li><a href="#">1- Listado de Subdiarios</a></li>
			<li><a href="#">2- Listado de Ingresos Brutos</a></li>
			<li><a href="#">3- Listado de Cta. Corriente</a></li>
			<li><a href="#">4- Listado Control Cobranzas</a></li>
			<li><a href="#">5- Listado de Saldos</a></li>
			<li><a href="#">6- Informes de Ventas</a></li>
			<li><a href="#">7- Calculo de Comisiones </a></li>
			<li><a href="#">8- Margen de Utilidad Bruta</a></li>
			<li><a href="#">9- Ranking de Clientes</a></li>
			</ul>
		</li>

		<li><a href="#">5- Estadistica Y Depuracion</a></li>
		<li><a href="#">6- Generacion Asiento Contable</a></li>
		<li><a href="#">7- Gestion Tarjetas de Credito</a></li>
		<li><a href="#">8- Cierre</a></li>
	</ul> <!-- CIERRE UL GESTION VENTAS -->

        <li><a href="#">2- Gestion COMPRAS</a></li>
        <li><a href="#">3- Gestion CAJA</a></li>
        <li><a href="#">4- CONTABILIDAD</a></li>
        <li><a href="#">5- Mantenimiento de Archivos</a>
	<ul> <!-- UL MANT ARCHIVOS-->
		<li><a href="#">1- Gestion de PRECIOS</a></li>
		<li><a href="#">2- Clientes / Proveedores</a>
			<ul> <!-- UL CLI / PROVEEDORES-->
			<li><a href="alta_clientes.php">1- Ingreso de Clientes</a></li>
			<li><a href="#">2- Listados de Clientes</a></li>
			<li><a href="#">3- Listado Detallado</a></li>
			<li><a href="#">4- Listado Etiquetas Clientes</a></li>
			<li><a href="#">5- Ingreso Proveedores</a></li>
			<li><a href="#">6- Listados Proveedores</a></li>
			<li><a href="#">7- Listado Etiquetas Proveedores</a></li>
			<li><a href="#">8- Ingreso Grupo Proveedores</a></li>
			<li><a href="#">9- Actualizacion Cta. Cte.</a></li>
			</ul></li> <!-- UL CIERRE CLI/PROVEEDORES-->
	
		<li><a href="#">3- Items o Articulos</a></li>
		<li><a href="#">4- Archivos Auxiliares</a>
<ul>
	<li>ACA EL PROBLEMA
		<ul><li>A   <ul><li>AA</li></ul> </li></ul></li>
</ul>

</li><!-- cierre aux-->


	</ul></li> <!-- cierre mantenimientos de Archivos -->
	<li><a href="#">6- Mantenimiento del Sistema</a>
	<li><a href="#">7- CONTAB. EJ. ANTERIOR</a></li>

</ul> <!-- CIERRE UL PRINCIPAL-->

webosiris · #2 (**permalink**) 13/02/2009, 06:46

y tu CSS?
intenta usar el selector >

PD: ya ma dificulta y me parece molesto usar un simple menú desplegable, no me quiero imaginar uno con 5 niveles

:

colote · #3 (**permalink**) 13/02/2009, 07:07

Hola, el codigo CSS me lo paso un amigo para crear este menu, aca te lo dejo ...
Ahh y a que te referis con "usa el selector" ?
Gracias

Código HTML:

/* Root = Vertical, Secondary = Vertical */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 200px; /*For KHTML*/
  list-style: none;
}

ul#navmenu-v:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-v li {
  float: left; /*For IE 7 lack of compliance*/
  display: block !important; /*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
ul#navmenu-v a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #336699;
}

/* 4th Menu */
ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #336699;
}

/* 4th Menu Hover */
ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 200px;
}


ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
  display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
  display: block;
}

Mikmoro · #4 (**permalink**) 13/02/2009, 18:13

Mira el código de este ejemplo, que despliega 4 niveles (los elementos 2, 2.1, 2.1.1) y no ocurre eso:
Esta es la hoja de estilo.

También puede servirte este otro.