CSS3 - élément de menu derrière son parent?

Question

Comme dans le titre.

J'ai trois menu de niveau et que vous voulez qu'il ressemble à:

[ FIRST LEVEL ITEM ] 
-------------------- 
[ SECOND LEVEL ITEM ] 
[ SECOND LEVEL ITEM ] 
[ THIRD LEVEL ITEM ] 
[ SECOND LEVEL ITEM ] 
[ THIRD LEVEL ITEM ] 
[ SECOND LEVEL ITEM ] 

Mais troisième éléments de niveau affichent juste derrière les autres éléments.

J'ajouté énorme cadre rouge 50px pour eux, de sorte que vous pourrez voir ce qui est le point:

http://jsfiddle.net/TQH9v/

Je suis un peu endormi et fatigué & doivent terminer ce code aujourd'hui, donc désolé pour tant de questions stupides. points de réputation Au moins facile: P

Merci :)

Answer 1

Votre CSS a beaucoup de choses superflues dans donc je ne vais pas modifier exactement.

Ce que vous devez savoir est le merveilleux modèle z-index. Vous n'avez jamais mentionné si vous vouliez que cela fonctionne dans IE, donc je vais juste l'expliquer pour les vrais navigateurs. Pour commencer, ajoutez position: relative; pour tous les éléments LI. Quelque chose comme

#page-navigation li { position: relative; } 

fonctionnera.

Maintenant, ajoutez un index z à chaque élément UL qui contient un menu contextuel et définissez-le sur un index z plus élevé que l'élément LI parent. Si vous ne définissez pas le z-index, il sera par défaut à 0.

https://developer.mozilla.org/en/understanding_css_z-index

Si vous voulez que cela fonctionne dans IE, vous devez définir la LI mère à un z-index supérieur à ce qu'il est contenu popout UL. C'est juste comment IE fonctionne stupide. http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/