2009-10-23 17 views
5

Estoy creando un sistema de menú usando una estructura UL/LI. Estoy tratando de usar selectores hermanos para los menús flotantes/mostrar-submenús.Selectores de hermanos adyacentes CSS - Problema IE8

Estoy usando esto;

#MainMenu li.Sel ul li.HasSub a:hover+ul { 
    display: block; 
} 

La estructura UL sería algo como esto;

<ul id='MainMenu'> 
    <li class='Sel'> 
    <a href='#'>Click Me</a> 
     <ul> 
      <li class='HasSub'> 
       <a href='#'>Hover Over Me</a> 
       <ul> 
        <li>Link</li> 
        <li>Link</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Supuestamente, cuando se cierne sobre "Hover Over Me", el hermano ul se debe mostrar. Funciona muy bien en Firefox, pero no en absoluto en IE8. Estoy seguro de que he visto el selector de hermanos '+' usado anteriormente en IE8, ¿dónde me estoy equivocando?

Respuesta

9

usted necesita para asegurarse de IE se está ejecutando en modo estándar - poner en un tipo de documento como esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 

De the documentation:

El combinador de hermanos adyacentes es un "signo más" (+) carácter que separa dos selectores simples. El espacio en blanco no es significativo.

Un selector de la forma "E + F" coincide con el elemento F cuando sigue inmediatamente al elemento hermano E en el árbol de documentos, ignorando los nodos de elementos (como nodos de texto y comentarios). Los elementos E y F deben compartir el mismo elemento primario y E debe preceder inmediatamente a F. Para hacer coincidir el primer hijo del elemento primario, utilice la pseudoclase: primer hijo.

Nota Requiere Windows Internet Explorer 7 o posterior.
NotaLos combinadores solo se habilitan en modo conforme a las normas (estricto! DOCTYPE).

+0

Hah. Lo gracioso es que solté el tipo de documento para poder crear un iframe al 100% de altura de una celda de tabla. Gracias, supongo que tendré que intentar averiguar por separado la altura del 100%. ¿Algunas ideas? Voy a tener que usar los efectos del menú JS para IE6. Saludos. – Joel

0

habría que ser más simple para añadir el vuelo estacionario sobre el elemento li y fijar el vuelo estacionario para esto es el uso de este http://www.xs4all.nl/~peterned/csshover.html

es decir

#MainMenu li.Sel ul li.HasSub:hover { 
    display: block; 
} 

Espero que ayude

Josh

Cuestiones relacionadas