[RESOLU] Problème d'affichage sous menu (IE)

Bonjour à tous et encore bravo pour ce forum!

Voici mon problème :
Quand je déroule mon menu déroulant CSS sous firefox, chrome, etc tout se passe bien mais sous internet explorer le sous menu apparaît sous le texte (contenu) de la page (ce qui est embêtant pour cliquer sur les liens). J'ai fait quelques recherches mais je n'ai pas encore trouvé de solutions.

<div id="menu">
<ul>
      <li>Blablabla
            <ul>
                   <li>Blablabla</li>
            </ul>
      </li>
</ul>
</div>

#menu {
	background-color:#008C99;
	width:100%;
	border-top: 6px solid #FFF;
	line-height:30px;
	position: absolute;
	top: 70px;
	left: 0px;
	text-align: center;
}
#menu a {
	display : block;
	padding : 0;
	color : #fff;
	text-decoration : none;
	width : 199px;
}
#menu li {
	float : left;
}
#menu li a{
	font-weight:bold;
}
#menu li ul { 
	position: absolute;
	width: 144px;
	left: -999em;
	z-index: 100;
}
#menu li ul li a {
	border-top: 1px solid #1b5a52;
	border-right: none;
	background-color: #207379;
	font-weight:normal;
}
#menu li ul li a:hover {
	background-color:#008C99;
}
html>body #menu li ul li {
	border-top : 1px solid #1b5a52;
	border-right: none;
}
#menu li:hover ul, #menu li li:hover ul {
        left: auto;
        min-height: 0;
}

http://www.ehpad-salornay.fr/v5/

Merci d'avance pour votre aide.
Modifié par mchev (19 Nov 2010 - 18:00)

(En fait, l'idée n'est pas de ne pas utiliser de Javascript et de ne jamais faire de menu déroulant, mais de donner des alternatives).

Je n'ai pas le temps en ce moment de tout regarder précisément, mais de mémoire les vieilles versions de IE (donc avant la 8), ne prennent pas en compte la pseudo-class :hover si elle est donné à un autre élément qu'un lien <a>.

Alors, directement tes deux dernières lignes risquent de poser problèmes:

#menu li:hover ul ul { 
        left: -999em; 
} 
#menu li:hover ul, #menu li li:hover ul { 
        left: auto; 
        min-height: 0; 
} 

(bon, je ne peux pas aller plus loin en ce moment! bonne chance)

Bon revenant un peu plus tard, je vois quelques autres problèmes.

Bin, pour commencer, tu devrais rassembler mieux tes CSS, tu as quelques règles qui visent le même objet.

Et ensuite, tes "li ul ul" ou tes "li li ul" ne visent aucun élément HTML que tu as créé (du moins si on se fit à ton code).

Autrement, je ne vois pas pourquoi ton #menu est en float, mais aussi en absolu. Un des deux serait-il superflu?


En tout cas, un petit dépoussiérage t'aidera sûrement à trouver la règle qui fait défaut. Mais en l'état, je ne vois pas du tout pourquoi ton menu s'affiche sous ton texte - en tout cas, mon imagination n'arrive pas encore à percer ce mystère!

-Est-ce que tes éléments sous le menu sont positionnés en absolu aussi ?
-Tu utilise quoi coté javascript ?
-Tu as une page en ligne pour voir en direct le problème ?

Bonne chance!

Bonjour et merci pour ton aide.

J'ai modifié un peu le code css (edit du premier post).

a écrit :
(En fait, l'idée n'est pas de ne pas utiliser de Javascript et de ne jamais faire de menu déroulant, mais de donner des alternatives).

En fait j'ai dit une bêtise, ce menu n'utilise pas le javascript.

a écrit :
Et ensuite, tes "li ul ul" ou tes "li li ul" ne visent aucun élément HTML que tu as créé (du moins si on se fit à ton code).

C'était pour prévoir des sous-sous-menu. Mais du coup je l'ai retiré pour l'exemple.

Effectivement les éléments sous le menu sont positionnés en absolu, le problème à l'air de venir de là. Mais du coup je ne voit pas vraiment comment je pourrais faire autrement.

J'ai mis une version en ligne pour que tu ai une vue d'ensemble :
http://www.ehpad-salornay.fr/v5/

Petit up, je cherche et cherche encore mais je ne vois pas comment résoudre le problème sans modifier toute la feuille de style...

Problème résolu, En fait c'est une erreur de ma part (forcement ).

Pour info :
Il suffisait de retirer l'attribut 'position' aux éléments suivants :

#pagebbox
#mainbbox

Merci pour ton aide Vaxilart.