Foros del Web » Creando para Internet » CSS »

Menu 3 niveles

Estas en el tema de Menu 3 niveles en el foro de CSS en Foros del Web. Hola estoy aciendo una lista en 3 niveles, pero el ultimo nivel no se imprime bien es pantalla. Les dejo los codigos para que vean ...
  #1 (permalink)  
Antiguo 02/05/2011, 08:57
 
Fecha de Ingreso: enero-2010
Mensajes: 111
Antigüedad: 7 años, 10 meses
Puntos: 2
Menu 3 niveles

Hola estoy aciendo una lista en 3 niveles, pero el ultimo nivel no se imprime bien es pantalla.
Les dejo los codigos para que vean como se imprime, y si me puden ayudar a solucionarlo.

style2.css
Código:
/*====== Menu Desplegable ========*/
ul#menu li{
    list-style:none;
    display:inline-block;
	margin:0;
	padding:0;
    
    list-style-type: none;
    float: left;
    /*text-transform: uppercase;*/
    font-size: 15px;
    
    font-weight: bold; /*Esto te genera una especie de cuadro donde se encierra al texto, ent. debo usar PADDING, para darle las distancias al DIV "contenedor".*/
    text-align:justify;
    /*line-height: 20px;*/
    margin-left:10px;
    padding-top:10px;
    padding-right: 5px;
    position: relative;
}

ul#menu li a {/*Propiedades de los hipervinculos asociados a la lista*/
    text-decoration: none;
    color: red;/*#222;*/    
    position: relative;    
}

                                /*=== Segundo nivel del menu ===*/

ul#menu li ul {/*Empieza segundo nivel*/
    display: none;         
}

ul#menu li:hover ul{
    background: red;
    display: block;
    position:absolute;/*Muy importamte*/
    padding: 0px;
    text-align: left;            
}

ul#menu li:hover ul li{    
    float:none;
    display: block;    
    font-weight: bold;
    background: red;
    width: 190%;/*es el ancho del menu desplegable*/ 
}    

ul#menu li ul li a{/*Termina segundo nivel*/
    color: white;    
}

                                /*=== Tercer nivel del menu ===*/

ul#menu li ul li ul{/*Empieza tercer nivel*/
    display: none;         
}

ul#menu li ul li:hover ul{
    background-position:bottom;
    display: block;
    background: black;  
    /*position:absolute;/*Muy importamte*/
    padding: 0px;
    text-align: left;
                
}

ul#menu li:hover ul li:hover ul{    
    display: block;    
	top:0;
	left:100%;
}    

ul#menu li ul li ul li a{
    color: gray  ;    
}
/*
ul#menu li:hover ul li:hover ul li a{/*Termina tercer nivel
    color: black;
}    */

/*===Fin Propiedades Menu Desplegable====*/
El html
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Red</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style2.css" media="screen" />

<!-- <script language="javascript" type="text/javascript" src="firebug/pi.js"></script>  
<script language="javascript" type="text/javascript" src="firebug/firebug-lite.js"></script> -->

</head>
<body>


<ul id="menu">
  <li><a href="#">inicio</a></li>
  <li><a href="#">acerca de</a></li>
  <li><a href="#">contactos</a>
    <ul>
        <li><a href="#">nivel 2</a></li>
        <li><a href="#">nivel 2</a>
            <ul>
                <li><a href="#">nivel 3.1</a></li>
                <li><a href="#">nivel 3.2</a></li>
            </ul>
        </li>      
        <li><a href="#">nivel 2</a></li>            
    </ul>
  </li>
</ul>

</body>
GRacias
__________________
Por favor evitar comentarios del estilo "leer el manual...", ya lo hice pero aun tengo dudas, por eso pregunto acá
  #2 (permalink)  
Antiguo 02/05/2011, 10:05
 
Fecha de Ingreso: abril-2011
Mensajes: 47
Antigüedad: 6 años, 8 meses
Puntos: 13
Respuesta: Menu 3 niveles

No estoy seguro que es la solución perfacta, pero la funciona en FF, IE9 y Chrome:

css
Código:
ul#menu li ul li ul{/*Empieza tercer nivel*/
        /* display: none;  */  
    margin-left:-1000px /*nuevo*/        
}

ul#menu li ul li:hover ul{
    background-position:bottom;
    display: block;
    background: black;  
    /*position:absolute;/*Muy importamte*/
    padding: 0px;
    text-align: left;
	margin-left:0px /*nuevo*/                
}
  #3 (permalink)  
Antiguo 02/05/2011, 10:10
Avatar de Manuellama  
Fecha de Ingreso: noviembre-2006
Ubicación: Zafra, Extremadura, Spain, Spain
Mensajes: 174
Antigüedad: 11 años
Puntos: 10
Respuesta: Menu 3 niveles

/*====== Menu Desplegable ========*/
ul#menu li{
list-style:none;
display:inline-block;
margin:0;
padding:0;

list-style-type: none;
float: left;
/*text-transform: uppercase;*/
font-size: 15px;

font-weight: bold; /*Esto te genera una especie de cuadro donde se encierra al texto, ent. debo usar PADDING, para darle las distancias al DIV "contenedor".*/
text-align:justify;
/*line-height: 20px;*/
margin-left:10px;
padding-top:10px;
padding-right: 5px;
position: relative;
}

ul#menu li a {/*Propiedades de los hipervinculos asociados a la lista*/
text-decoration: none;
color: red;/*#222;*/
position: relative;
}

/*=== Segundo nivel del menu ===*/

ul#menu li ul {/*Empieza segundo nivel*/
display: none;
}

ul#menu li:hover ul{
background: red;
display: block;
position:absolute;/*Muy importamte*/
padding: 0px;
text-align: left;
}

ul#menu li:hover ul li{
float:none;
display: block;
font-weight: bold;
background: red;
width: 190%;/*es el ancho del menu desplegable*/
}

ul#menu li ul li a{/*Termina segundo nivel*/
color: white;
}

/*=== Tercer nivel del menu ===*/

ul#menu li ul li ul{/*Empieza tercer nivel*/
position:relative;
visibility:hidden;
}

ul#menu li ul li:hover ul{
background-position:bottom;
display: block;
background: black;
position:absolute;/*Muy importamte*/
padding: 0px;
text-align: left;
visibility:visible;

}

ul#menu li:hover ul li:hover ul{
display: block;
top:0;
left:100%;
}

ul#menu li ul li ul li a{
color: gray ;
}

ul#menu li:hover ul li:hover ul li a{/*Termina tercer nivel
color: black;


Cambia el css por este...

La parte nueva es esta:


ul#menu li ul li ul{/*Empieza tercer nivel*/
position:relative;
visibility:hidden;
}

ul#menu li ul li:hover ul{
background-position:bottom;
display: block;
background: black;
position:absolute;/*Muy importamte*/
padding: 0px;
text-align: left;
visibility:visible;

}

Cambia la visibility.
  #4 (permalink)  
Antiguo 02/05/2011, 14:18
 
Fecha de Ingreso: enero-2010
Mensajes: 111
Antigüedad: 7 años, 10 meses
Puntos: 2
Respuesta: Menu 3 niveles

GRacis gente.

Las dos respuestas me sirvieron

GRACIAS !!!!!!
__________________
Por favor evitar comentarios del estilo "leer el manual...", ya lo hice pero aun tengo dudas, por eso pregunto acá

Etiquetas: niveles
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 01:26.