Menu ul li 3er Nivel no muestra

sativonz · #1 (**permalink**) 26/02/2014, 01:34

Hola buenas quería ver si podríais echarle un vistazo al codigo este que me esta volviendo loco para ver si podemos solucionar que no me muestra el tercer nivel de submenu. Gracias, ahí va el código html y css (para copia pega;)):

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css"
    href="../estilos/estiloELPAIS-2.css" title="style" />
<title>Menu El Pais</title>
</head>
<body>
    <div id="contenedor">
        <ul id="menu">
            <li id="liMenu"><a href="http://internacional.elpais.com/"
                target="blank" id="internacional">INTERNACIONAL</a>
                <ul id="nivel2">
 
                    <li><a href="">111111111</a>
 
                        <ul id="nivel3">
 
                            <li><a href="">nivel 3</a></li>
                            <li><a href="">nivel 3</a></li>
 
                        </ul></li>
                    <li><a href="">222222222</a></li>
                    <li><a href="">333333333</a></li>
                    <li><a href="">444444444</a></li>
                </ul></li>
            <li id="liMenu"><a href="http://politica.elpais.com/"
                target="blank" id="politica">POLÍTICA</a></li>
            <li id="liMenu"><a href="http://economia.elpais.com/"
                target="blank" id="economia">ECONOMÍA</a></li>
            <li id="liMenu"><a href="http://cultura.elpais.com/"
                target="blank" id="cultura">CULTURA</a></li>
            <li id="liMenu"><a href="http://sociedad.elpais.com/"
                target="blank" id="sociedad">SOCIEDAD</a></li>
            <li id="liMenu"><a href="http://deportes.elpais.com/"
                target="blank" id="deportes">DEPORTES</a></li>
        </ul>
    </div>
</body>
</html>

Código CSS:

Ver original*{
    margin:0;  /* Alinea los elementos */
    padding:0; /* Alinea los elementos */
}
 
 
div#contenedor {
    margin: 0 auto;
    width: 620px;
    margin-top: 50px
}
 
 
 
ul {
    font: Tahoma, Arial, Helvetica, Garuda, sans-serif;
}
 
#menu {
    list-style:none; /* Quita el puntito de los li */
}
 
#menu > li { 
    margin:1px;
    float:left; /* Alinea los li */
    display: inline;
}
 
#menu  li a {
    height : 35px;
    display:block; 
    padding-top: 20px;
    text-decoration:none; /* Quitar el estilo al tipico enlace */
    text-align:center;
    text-transform: uppercase; 
    font-size:small;
    font-weight: bold;
    color:#FFFFFF;
    background-color: #353535;
}
 
 
/* Estilos del borde superior */
 
#menu   li#liMenu  a:hover {
    border-top: 9px solid #fff;
}
 
#internacional {
    width:125px;
    border-top: 9px solid #1172c2;
}
 
#politica {
    width:80px;
    border-top: 9px solid #ff4d00;
}
 
#economia {
    width:80px;
    border-top: 9px solid #ff7699;
}
 
#cultura {
    width:80px;
    border-top: 9px solid #e0387a;
}
 
#sociedad {
    width:80px;
    border-top: 9px solid #1c9b81;
}
 
#deportes {
    width:80px;
    border-top: 9px solid #8cbb00;
}
 
/* Estilos del borde superior cuando se pasa el raton por encima (hover)*/
 
#internacional:hover{
    background-color:#005b9a;
}
 
#politica:hover{
    background-color:#ff4d00;
}
 
#economia:hover {
    background-color:#ff7699;
}
 
#cultura:hover {
    background-color:#e0387a;
}
 
#sociedad:hover {
    background-color:#1c9b81;
}
 
#deportes:hover {
    background-color:#8cbb00;
}
 
/* SUBMENU */
 
#nivel2 > li a{
    width: 125px;
    background: #ccc;
}
 
#nivel2 {
    display: none;  
    position: absolute;
    list-style: none;
}
 
 
#menu  li:hover #nivel2 {
    display: block;
}
 
 
/* SUBMENU 2*/
 
#nivel3 > li a{
    display: none;
    width: 125px;
    background: blue;
}
 
#nivel3 {
    position: relative;
    list-style: none;
    top: 0px;
    left: 125px;
}
 
 
#menu  li:hover #nivel2 {
    display: block;
}

Copiar al Eclipse y Ctrl + Shift + F lo apaña todo muy bien ajjajaj Espero respuestas maquinas;)

pzin · #2 (**permalink**) 26/02/2014, 02:45

El submenú se ve, lo que no se ve son los enlaces porque los ocultas con:

Código CSS:

Ver original#nivel3 > li a {
  display: none;
  [...]
}

Y como por defecto el valor height de todos los elementos es auto ese menú se queda sin altura, ya que es igual a cero al no tener elementos en linea o bloque. Luego no se ve nada.

Lo que tienes que ocultar es la lista, es decir, el elemento ul y no algunos de sus elementos descendientes. Luego seguramente quieras ponerle también una posición absoluta en lugar de relativa, para evitar el problema siguiente.