Problema en IE7 con menú desplegable

ggatuso · #1 (**permalink**) 27/12/2010, 19:17

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ejemplo</title>
    <link rel="stylesheet" type="text/css" href="Ejemplo.css"/>
</head>
 
<body>
 
<ul id="nav">
<li>Renaissance
<ul>
  <li><a href="#">Brunelleschi</a></li>
  <li><a href="#">Alberti</a></li>
  <li><a href="#">Palladio</a></li>
  <li><a href="#">Michelangelo</a></li>
  <li><a href="#">Bramante</a></li>
</ul></li>
<li>Art Nouveau
<ul>
  <li><a href="#">Mackintosh</a></li>
  <li><a href="#">Guimard</a></li>
  <li><a href="#">Horta</a></li>
  <li><a href="#">van de Velde</a></li>
</ul></li>
<li>Modern
<ul>
  <li><a href="#">Sullivan</a></li>
  <li>Le Corbusier &gt;&gt;
  <ul>
     <li><a href="#">Otro nivel1</a></li>
     <li>Otro nivel2 &gt;&gt;
     <ul>
        <li><a href="#">Otro nivel11</a></li>
        <li><a href="#">Otro nivel12</a></li>
        <li><a href="#">Otro nivel13</a></li>
        <li><a href="#">Otro nivel14</a></li>
        <li><a href="#">Otro nivel15</a></li>
     </ul>
     </li>
     <li><a href="#">Otro nivel3</a></li>
     <li><a href="#">Otro nivel4</a></li>
     <li><a href="#">Otro nivel5</a></li>
  </ul>
  </li>
  <li><a href="#">Mies</a></li>
  <li><a href="#">Gropius</a></li>
  <li><a href="#">Yamasaki</a></li>
</ul></li>
<li>Postmodern
<ul>
  <li><a href="#">Venturi</a></li>
  <li><a href="#">Eisenman</a></li>
  <li><a href="#">Stern</a></li>
  <li><a href="#">Graves</a></li>
  <li><a href="#">Gehry</a></li>
</ul></li>
<li>Digital
<ul>
  <li><a href="#">Xenakis</a></li>
  <li><a href="#">Lynn</a></li>
  <li><a href="#">Diller+Scofidio</a></li>
  <li><a href="#">Zellner</a></li>
  <li><a href="#">Hadid</a></li>
</ul></li>
</ul>
 
</body>
</html>

Y el css:

Código CSS:

Ver original* { 
   margin: 0px;
   padding: 0px; 
   outline: 0;
}
 
body{
   width: 100%;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
ul {
   text-align: center;
}
 
#nav {
   list-style:none;
   font-size: 0.7em;
}
 
#nav li {
   position:relative; /* Las coordenadas de los <ul> inferiores seran*/ 
                      /* relativas al <li> que los contiene */
   color: #f90;
   font-weight: bold;
   width: 10em;
}
 
#nav > li { /* Solo para los <li> del primer nivel */
   float: left;
   color: white;  
   padding: 1.5em 0;
   background: black;
   border-right: 1em solid green;
   border-left: 1em solid green;
   border-bottom:1px solid blue;
}
 
#nav li a { /*Para todos los enlaces de la lista*/
   text-decoration: none;
   color: #f90;
   font-weight: bold;
}
 
#nav > li:hover { /*Para los <li> activos del primer nivel*/
   color: black;
   background: red;
}
 
#nav > li li:hover { /*Para el resto de los <li> activos*/
   color: #480;
   background: #29497b;
}
 
#nav > li li { /*Para los <li> del segundo nivel o inferiores*/
   background: yellow;
   border: 1px solid red;
   left: -1px;
   padding: 1em 0;
}
 
#nav ul {
   position:absolute; /* Esta posicion es relativa al <li> que contiene a este <ul> */
   display:none; /*No mostrar hasta que se pase el raton por encima del <li>*/
   list-style:none;
}
 
#nav li:hover > ul {
   display:block; /*Mostrar todo el bloque de <li>'s cuando se pasa el raton*/ 
                  /*por encima del <li> padre*/
   z-index: 6000; /*Los submenus tienen que estar por encima de cualquier elemento*/   
}
 
#nav > li:hover > ul {
left:-1em;
top: 100%;
}
 
#nav ul ul {
   left: 100%;
   margin-left: 1px;
   top: -1px;
}
 
#nav > li > ul { /* Solo para los <ul> inmediatamente debajo de los <li> de*/
                 /* primer nivel*/
   display:none;
   list-style:none;
   margin-left: 1em;
}

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#nav ul {
   position:absolute; /* Esta posicion es relativa al <li> que contiene a este <ul> */
   display:none; /*No mostrar hasta que se pase el raton por encima del <li>*/
   list-style:none;
}
 
#nav li:hover > ul {
   display:block; /*Mostrar todo el bloque de <li>'s cuando se pasa el raton*/ 
                  /*por encima del <li> padre*/
   z-index: 6000; /*Los submenus tienen que estar por encima de cualquier elemento*/   
}

por

Código CSS:

Ver original#nav ul {
   display:none; /*No mostrar hasta que se pase el raton por encima del <li>*/
   list-style:none;
}
 
#nav li:hover > ul {
   position:absolute; /* Esta posicion es relativa al <li> que contiene a este <ul> */
   display:block; /*Mostrar todo el bloque de <li>'s cuando se pasa el raton*/ 
                  /*por encima del <li> padre*/
   z-index: 6000; /*Los submenus tienen que estar por encima de cualquier elemento*/   
}

Ahora ya funciona tanto en IE7 como en Firefox 3.6