Menu 3 niveles

Lechu_ · #1 (**permalink**) 02/05/2011, 07:57

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

samplei · #2 (**permalink**) 02/05/2011, 09:05

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*/                
}

Manuellama · #3 (**permalink**) 02/05/2011, 09:10

/*====== 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.

Lechu_ · #4 (**permalink**) 02/05/2011, 13:18

GRacis gente.

Las dos respuestas me sirvieron

GRACIAS !!!!!!