Tema: Menu ul li 3er Nivel no muestra
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/02/2014, 01:34
sativonz
 
Fecha de Ingreso: septiembre-2013
Ubicación: Valencia
Mensajes: 5
Antigüedad: 11 años, 2 meses
Puntos: 0
Pregunta
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <link rel="stylesheet" type="text/css"
  6.     href="../estilos/estiloELPAIS-2.css" title="style" />
  7. <title>Menu El Pais</title>
  8. </head>
  9. <body>
  10.     <div id="contenedor">
  11.         <ul id="menu">
  12.             <li id="liMenu"><a href="http://internacional.elpais.com/"
  13.                 target="blank" id="internacional">INTERNACIONAL</a>
  14.                 <ul id="nivel2">
  15.  
  16.                     <li><a href="">111111111</a>
  17.  
  18.                         <ul id="nivel3">
  19.  
  20.                             <li><a href="">nivel 3</a></li>
  21.                             <li><a href="">nivel 3</a></li>
  22.  
  23.                         </ul></li>
  24.                     <li><a href="">222222222</a></li>
  25.                     <li><a href="">333333333</a></li>
  26.                     <li><a href="">444444444</a></li>
  27.                 </ul></li>
  28.             <li id="liMenu"><a href="http://politica.elpais.com/"
  29.                 target="blank" id="politica">POLÍTICA</a></li>
  30.             <li id="liMenu"><a href="http://economia.elpais.com/"
  31.                 target="blank" id="economia">ECONOMÍA</a></li>
  32.             <li id="liMenu"><a href="http://cultura.elpais.com/"
  33.                 target="blank" id="cultura">CULTURA</a></li>
  34.             <li id="liMenu"><a href="http://sociedad.elpais.com/"
  35.                 target="blank" id="sociedad">SOCIEDAD</a></li>
  36.             <li id="liMenu"><a href="http://deportes.elpais.com/"
  37.                 target="blank" id="deportes">DEPORTES</a></li>
  38.         </ul>
  39.     </div>
  40. </body>
  41. </html>


Código CSS: 
Ver original
  1. *{
  2.     margin:0;  /* Alinea los elementos */
  3.     padding:0; /* Alinea los elementos */
  4. }
  5.  
  6.  
  7. div#contenedor {
  8.     margin: 0 auto;
  9.     width: 620px;
  10.     margin-top: 50px
  11. }
  12.  
  13.  
  14.  
  15. ul {
  16.     font: Tahoma, Arial, Helvetica, Garuda, sans-serif;
  17. }
  18.  
  19. #menu {
  20.     list-style:none; /* Quita el puntito de los li */
  21. }
  22.  
  23. #menu > li { 
  24.     margin:1px;
  25.     float:left; /* Alinea los li */
  26.     display: inline;
  27. }
  28.  
  29. #menu  li a {
  30.     height : 35px;
  31.     display:block; 
  32.     padding-top: 20px;
  33.     text-decoration:none; /* Quitar el estilo al tipico enlace */
  34.     text-align:center;
  35.     text-transform: uppercase; 
  36.     font-size:small;
  37.     font-weight: bold;
  38.     color:#FFFFFF;
  39.     background-color: #353535;
  40. }
  41.  
  42.  
  43. /* Estilos del borde superior */
  44.  
  45. #menu   li#liMenu  a:hover {
  46.     border-top: 9px solid #fff;
  47. }
  48.  
  49. #internacional {
  50.     width:125px;
  51.     border-top: 9px solid #1172c2;
  52. }
  53.  
  54. #politica {
  55.     width:80px;
  56.     border-top: 9px solid #ff4d00;
  57. }
  58.  
  59. #economia {
  60.     width:80px;
  61.     border-top: 9px solid #ff7699;
  62. }
  63.  
  64. #cultura {
  65.     width:80px;
  66.     border-top: 9px solid #e0387a;
  67. }
  68.  
  69. #sociedad {
  70.     width:80px;
  71.     border-top: 9px solid #1c9b81;
  72. }
  73.  
  74. #deportes {
  75.     width:80px;
  76.     border-top: 9px solid #8cbb00;
  77. }
  78.  
  79. /* Estilos del borde superior cuando se pasa el raton por encima (hover)*/
  80.  
  81. #internacional:hover{
  82.     background-color:#005b9a;
  83. }
  84.  
  85. #politica:hover{
  86.     background-color:#ff4d00;
  87. }
  88.  
  89. #economia:hover {
  90.     background-color:#ff7699;
  91. }
  92.  
  93. #cultura:hover {
  94.     background-color:#e0387a;
  95. }
  96.  
  97. #sociedad:hover {
  98.     background-color:#1c9b81;
  99. }
  100.  
  101. #deportes:hover {
  102.     background-color:#8cbb00;
  103. }
  104.  
  105. /* SUBMENU */
  106.  
  107. #nivel2 > li a{
  108.     width: 125px;
  109.     background: #ccc;
  110. }
  111.  
  112. #nivel2 {
  113.     display: none;  
  114.     position: absolute;
  115.     list-style: none;
  116. }
  117.  
  118.  
  119. #menu  li:hover #nivel2 {
  120.     display: block;
  121. }
  122.  
  123.  
  124. /* SUBMENU 2*/
  125.  
  126. #nivel3 > li a{
  127.     display: none;
  128.     width: 125px;
  129.     background: blue;
  130. }
  131.  
  132. #nivel3 {
  133.     position: relative;
  134.     list-style: none;
  135.     top: 0px;
  136.     left: 125px;
  137. }
  138.  
  139.  
  140. #menu  li:hover #nivel2 {
  141.     display: block;
  142. }

Copiar al Eclipse y Ctrl + Shift + F lo apaña todo muy bien ajjajaj Espero respuestas maquinas;)
Última edición por pzin; 26/02/2014 a las 02:40 Razón: combinar mensajes y formato código