Foros del Web » Creando para Internet » CSS »

Problema en IE7 con menú desplegable

Estas en el tema de Problema en IE7 con menú desplegable en el foro de CSS en Foros del Web. Hola a todos!! Llevo unos días comiéndome la cabeza con un error en un menú desplegable de varios niveles. Es la primera vez que uso ...
  #1 (permalink)  
Antiguo 27/12/2010, 19:17
 
Fecha de Ingreso: diciembre-2010
Mensajes: 2
Antigüedad: 7 años
Puntos: 0
Problema en IE7 con menú desplegable

Hola a todos!!
Llevo unos días comiéndome la cabeza con un error en un menú desplegable de varios niveles. Es la primera vez que uso CSS y seguro que es una tontería que no doy visto, pero el caso es que después de mirarme medio Internet sigo sin dar con la solución (tampoco es que tenga muy claro cómo buscar el error...). Bueno, el problema es que en Firefox 3.6 todo va bien, pero en IE7, al seleccionar alguna de las opciones del primer nivel, me aparece el segundo nivel de opciones (como debe ser), pero también me aparecen el resto de submenús. Eso sí, éstos últimos aparecen vacíos. Yo lo que quiero es que sólo aparezcan las opciones del nivel inmediatamente inferior a la opción seleccionada. No sé si me he explicado bien.
Os dejo el código:

El html:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <title>Ejemplo</title>
  4.     <link rel="stylesheet" type="text/css" href="Ejemplo.css"/>
  5. </head>
  6.  
  7.  
  8. <ul id="nav">
  9. <li>Renaissance
  10. <ul>
  11.   <li><a href="#">Brunelleschi</a></li>
  12.   <li><a href="#">Alberti</a></li>
  13.   <li><a href="#">Palladio</a></li>
  14.   <li><a href="#">Michelangelo</a></li>
  15.   <li><a href="#">Bramante</a></li>
  16. </ul></li>
  17. <li>Art Nouveau
  18. <ul>
  19.   <li><a href="#">Mackintosh</a></li>
  20.   <li><a href="#">Guimard</a></li>
  21.   <li><a href="#">Horta</a></li>
  22.   <li><a href="#">van de Velde</a></li>
  23. </ul></li>
  24. <li>Modern
  25. <ul>
  26.   <li><a href="#">Sullivan</a></li>
  27.   <li>Le Corbusier &gt;&gt;
  28.   <ul>
  29.      <li><a href="#">Otro nivel1</a></li>
  30.      <li>Otro nivel2 &gt;&gt;
  31.      <ul>
  32.         <li><a href="#">Otro nivel11</a></li>
  33.         <li><a href="#">Otro nivel12</a></li>
  34.         <li><a href="#">Otro nivel13</a></li>
  35.         <li><a href="#">Otro nivel14</a></li>
  36.         <li><a href="#">Otro nivel15</a></li>
  37.      </ul>
  38.      </li>
  39.      <li><a href="#">Otro nivel3</a></li>
  40.      <li><a href="#">Otro nivel4</a></li>
  41.      <li><a href="#">Otro nivel5</a></li>
  42.   </ul>
  43.   </li>
  44.   <li><a href="#">Mies</a></li>
  45.   <li><a href="#">Gropius</a></li>
  46.   <li><a href="#">Yamasaki</a></li>
  47. </ul></li>
  48. <li>Postmodern
  49. <ul>
  50.   <li><a href="#">Venturi</a></li>
  51.   <li><a href="#">Eisenman</a></li>
  52.   <li><a href="#">Stern</a></li>
  53.   <li><a href="#">Graves</a></li>
  54.   <li><a href="#">Gehry</a></li>
  55. </ul></li>
  56. <li>Digital
  57. <ul>
  58.   <li><a href="#">Xenakis</a></li>
  59.   <li><a href="#">Lynn</a></li>
  60.   <li><a href="#">Diller+Scofidio</a></li>
  61.   <li><a href="#">Zellner</a></li>
  62.   <li><a href="#">Hadid</a></li>
  63. </ul></li>
  64. </ul>
  65.  
  66. </body>
  67. </html>

Y el css:
Código CSS:
Ver original
  1. * {
  2.    margin: 0px;
  3.    padding: 0px;
  4.    outline: 0;
  5. }
  6.  
  7. body{
  8.    width: 100%;
  9.    font-family: Verdana, Arial, Helvetica, sans-serif;
  10. }
  11.  
  12. ul {
  13.    text-align: center;
  14. }
  15.  
  16. #nav {
  17.    list-style:none;
  18.    font-size: 0.7em;
  19. }
  20.  
  21. #nav li {
  22.    position:relative; /* Las coordenadas de los <ul> inferiores seran*/
  23.                       /* relativas al <li> que los contiene */
  24.    color: #f90;
  25.    font-weight: bold;
  26.    width: 10em;
  27. }
  28.  
  29. #nav > li { /* Solo para los <li> del primer nivel */
  30.    float: left;
  31.    color: white;  
  32.    padding: 1.5em 0;
  33.    background: black;
  34.    border-right: 1em solid green;
  35.    border-left: 1em solid green;
  36.    border-bottom:1px solid blue;
  37. }
  38.  
  39. #nav li a { /*Para todos los enlaces de la lista*/
  40.    text-decoration: none;
  41.    color: #f90;
  42.    font-weight: bold;
  43. }
  44.  
  45. #nav > li:hover { /*Para los <li> activos del primer nivel*/
  46.    color: black;
  47.    background: red;
  48. }
  49.  
  50. #nav > li li:hover { /*Para el resto de los <li> activos*/
  51.    color: #480;
  52.    background: #29497b;
  53. }
  54.  
  55. #nav > li li { /*Para los <li> del segundo nivel o inferiores*/
  56.    background: yellow;
  57.    border: 1px solid red;
  58.    left: -1px;
  59.    padding: 1em 0;
  60. }
  61.  
  62. #nav ul {
  63.    position:absolute; /* Esta posicion es relativa al <li> que contiene a este <ul> */
  64.    display:none; /*No mostrar hasta que se pase el raton por encima del <li>*/
  65.    list-style:none;
  66. }
  67.  
  68. #nav li:hover > ul {
  69.    display:block; /*Mostrar todo el bloque de <li>'s cuando se pasa el raton*/
  70.                   /*por encima del <li> padre*/
  71.    z-index: 6000; /*Los submenus tienen que estar por encima de cualquier elemento*/  
  72. }
  73.  
  74. #nav > li:hover > ul {
  75. left:-1em;
  76. top: 100%;
  77. }
  78.  
  79. #nav ul ul {
  80.    left: 100%;
  81.    margin-left: 1px;
  82.    top: -1px;
  83. }
  84.  
  85. #nav > li > ul { /* Solo para los <ul> inmediatamente debajo de los <li> de*/
  86.                  /* primer nivel*/
  87.    display:none;
  88.    list-style:none;
  89.    margin-left: 1em;
  90. }


Pongo una imagen para que se vea bien el error:



Como habríais comprobado, los tamaños y todo eso aún no lo depuré (px's donde debería haber em's, em's donde debería haber %'s, etc) porque primero me gustaría que funcionase.
Pues nada, a ver si álguien me puede decir cuál es el fallo.
Gracias de antemano!!


Edito:
Ya sabía que era una tontería. Simplemente tenía que cambiar
Código CSS:
Ver original
  1. #nav ul {
  2.    position:absolute; /* Esta posicion es relativa al <li> que contiene a este <ul> */
  3.    display:none; /*No mostrar hasta que se pase el raton por encima del <li>*/
  4.    list-style:none;
  5. }
  6.  
  7. #nav li:hover > ul {
  8.    display:block; /*Mostrar todo el bloque de <li>'s cuando se pasa el raton*/
  9.                   /*por encima del <li> padre*/
  10.    z-index: 6000; /*Los submenus tienen que estar por encima de cualquier elemento*/  
  11. }
por
Código CSS:
Ver original
  1. #nav ul {
  2.    display:none; /*No mostrar hasta que se pase el raton por encima del <li>*/
  3.    list-style:none;
  4. }
  5.  
  6. #nav li:hover > ul {
  7.    position:absolute; /* Esta posicion es relativa al <li> que contiene a este <ul> */
  8.    display:block; /*Mostrar todo el bloque de <li>'s cuando se pasa el raton*/
  9.                   /*por encima del <li> padre*/
  10.    z-index: 6000; /*Los submenus tienen que estar por encima de cualquier elemento*/  
  11. }
Ahora ya funciona tanto en IE7 como en Firefox 3.6

Última edición por ggatuso; 28/12/2010 a las 10:00

Etiquetas: desplegable
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 02:34.