Foros del Web » Creando para Internet » CSS »

menú desplegable hacia abajo, tercer nivel

Estas en el tema de menú desplegable hacia abajo, tercer nivel en el foro de CSS en Foros del Web. hola! estoy realizando un menú vertical que se despliega hacia abajo, el problema es que no se como llamar en css al tercer nivel para ...
  #1 (permalink)  
Antiguo 10/03/2010, 08:01
 
Fecha de Ingreso: marzo-2009
Mensajes: 509
Antigüedad: 8 años, 9 meses
Puntos: 17
menú desplegable hacia abajo, tercer nivel

hola! estoy realizando un menú vertical que se despliega hacia abajo, el problema es que no se como llamar en css al tercer nivel para darle los estilos que quiero, esto es lo uqe tengo:

Código HTML:
<div class="menu" ><ul class="menu">
   <li>opcion 1
      <ul>
         <li>opcion 1.1</li>
         <li>opcion 1.2</li>
      </ul>
   </li>
   <li>opcion 2
      <ul>
         <li>opcion 2.1
            <ul>
               <li>opcion 2.1.1</li>
               <li> opcion 2.1.2</li>
            </ul>
         </li>
         <li>ppcion 2.2</li>
      </ul>
   </li>
</ul>
</div> 
Y el css:

Código:
#menu {
	float:left;
	margin-top:25px;
	width: 240px;
	}

#menu li {
	list-style:none;
}

#menu li a {
  	height: 24px;
	text-decoration: none;
	}

#menu li a:link, #menu li a:visited {
	color: #9E3C02;
	display: block;
	background: url(menu/menu.gif);
	padding: 8px 0 0 30px;
	}

#menu li a:hover{
	color: #fff;
	background: url(menu/menu.gif) 0 -32px;
        padding: 8px 0 0 30px;
	}

#menu li a:active, #menu li.activo a{
	color: #fff;
	background: url(menu/menu.gif) 0 -64px;
	padding: 8px 0 0 30px;
	}

#menu ul ul { 	
	display:none;
	color: #9E3C02;
	background: url(menu/menu.gif) 0 -32px;	
	padding: 8px 0 0 30px;
}

#menu ul ul:hover { 
	display:none;
	list-style:none;
	color: #fff;
	background: url(menu/menu.gif) 0 -32;	
	padding: 8px 0 0 30px;
}

#menu ul li:hover > ul, #menu ul li.activo > ul {
	display:block;
}
Lo que quiero es saber como llamar en css a las opciones 2.1.1 y 2.1.2

Gracias!! Saludos!
  #2 (permalink)  
Antiguo 10/03/2010, 09:49
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: menú desplegable hacia abajo, tercer nivel

Mira este ejemplo de Mikmoro, creo te será de ayuda.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 11/03/2010, 06:04
 
Fecha de Ingreso: marzo-2009
Mensajes: 509
Antigüedad: 8 años, 9 meses
Puntos: 17
Respuesta: menú desplegable hacia abajo, tercer nivel

Hola! pues si que me ha sido de ayuda! gracias, pero sigo teniendo otro problema que no consigo resolver con ese ejemplo, el problema es que yo quiero una decoración diferente para los niveles 2 y 3, pero toma la del primer nivel. Pongo el código que creo que falla:

Código HTML:
/* Creo que el error es esto */
#menu li a:link, #menu li a:visited { /* Estilo del menú de primer nivel */
	color: #9E3C02;
	display: block;
	background: url(menu/menu.gif);
	padding: 8px 0 0 30px;
}

/* Y esto lo que no se ve */
#menu li ul.segundoNivel{ /* Estilo del menú de segundo nivel */	
	color: #9E3C02;	
	display:none;	
	background: url(menu/menu.gif) 0 -32px;
	padding: 0 0 0 0;
}

#menu ul ul.tercerNivel{ /*Estilo del menú del tercer nivel */
	background: url(menu/menu.gif) 0 -64px;
	font : 60% sans-serif;
	text-align:left;
	color: fff;
	padding: 0 0 0 0;
}

Muchas gracias!

Etiquetas: abajo, desplegable, nivel
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 21:13.