Problème d'affichage menu déroulant CSS [Résolu]

Bonjour à tous.

J'ai eu beau chercher, je n'ai pas trouvé de réponse à mon problème (qui me paraît plus qu'étrange bien évidemment )
En effet, j'ai créé un menu déroulant vertical en CSS et XHTML uniquement ; aucun problème avec Firefox mais avec IE (version 7 je crois), si l'on déplace sa souris lentement vers le bas, on se rend compte que le menu déroulé disparaît au même niveau que lorsqu'on en vient à se superposer sur le contenu de la div du dessous.

(très dur à expliquer ... essayez par vous même )
(ne faites pas attention au contenu ni aux petits défaults, tout est en construction !)

http://www.sansindiscretion.fr/

Pour ce qui est du code css : (c'est long !)

/*
Theme Name: Weather
Theme URI:  http://www.sansindiscretion.fr/
 
Description: Le second thème de Salinwan
Version: 0.1
Author: Salinwan

Creation Theme by Salinwan ||  http://www.sansindiscretion.fr
 

*/

* {
margin: 0px;
padding: 0px;
}

body {
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 12px;
text-align: center;
background: white;
color: #575449;
line-height : 1.4em; 
letter-spacing : 1px;
}

#page {
margin: 0px auto;
text-align: justify;
width: 1000px;
border : 1px gray solid ;
}

a {
color : #618db2; 
text-decoration : none ; 
font-weight: bold ;
}

a:hover {
color: #808080;
text-decoration: none;
}

/*
--------------- HEADER ---------------
*/

#header {
background: url(images/entete.jpg);
background-repeat: no-repeat;
background-position: right bottom;
height: 208px;
}

#header #titre {
background: url(images/titre.png);
background-repeat: no-repeat;
background-position: left top;
position: relative;
top: 62px;
left: 25%;
height: 43px;
width: 278px ;
}

#header #description {
}

/*
--------------- MENUS ---------------
*/

/*
Premier Etage
*/

.menu {
height: 30px;
padding-right: 130px;
background: #DDDDDD;
}

.menu ul li {
background: #DDDDDD;
float: left;
list-style-type: none;
margin-left: 0px;
border: 1px solid gray;
}

.menu ul li:hover {
cursor: pointer;
background: white;
}

.menu ul li a {
font-weight: normal;
display: block;
width: 100px;
padding: 5px;
}

.menu .current_page_item, .menu .current_page_ancestor, .menu .current_page_parent {
background: white;
border-bottom: 1px solid white ;
}

.menu ul li ul .current_page_item, .menu li ul .current_page_ancestor, .menu li ul .current_page_parent {
border-bottom: 1px solid gray ;
}

/*
Deuxieme Etage
*/

.menu ul li ul{
display: none;
border: 1px solid gray;
position: absolute;
border-bottom: 0;
}

.menu ul li:hover ul{
display: block;
}


.menu ul li ul li{
list-style-type: none;
border: 0px;
border-bottom: 1px solid gray;
float: none;
}


.menu ul li ul li a{
width: 150px;
border: 1px solid yellow;
margin: 0px;
}


/*
--------------- CONTENT ---------------
*/

#content {
border-left: 1px solid gray ;
width: 759px;
padding: 20px;
min-height: 30em;
overflow: auto;
}

#content h2 {
color: #456191;
font-size: 1.3em;
margin-bottom: 30px;
}

#content h2 a{
color: #456191;
}

#content p {
text-indent: 3em;
margin-bottom: 10px;
}

#content-page {
overflow: auto;
padding: 20px;
min-height: 30em;
}

#content-page h2 {
color: #456191;
font-size: 1.3em;
margin-bottom: 30px;
}

#content-page h2 a{
color: #456191;
}

#content-page p {
text-indent: 3em;
margin-bottom: 10px;
}

.post {
border-bottom: 1px #BCBCBC dotted;
margin-bottom: 30px;
}

.post_content {
margin: 30px 0px;
}

.entry {
margin: 30px 0px;
}

.postmetadata {
font-size: 0.8em;
color: #999;
margin: 30px 0px;
}

/*
--------------- COMMENTS ---------------
*/

.cadre_commentaires {
border-bottom: 1px dotted #ccc;
border-top: 1px dotted #ccc;
padding: 30px;
}

.cadre_commentaires  h3{
margin-bottom: 20px;
}
 
.comments-template {
margin: 30px 10px;
}

.comments-template ol{
	margin: 10px;
	padding: 0 0 0 15px;
	list-style: none;
}
 
.comments-template ol p{
	font-size: 0.9em;
}
 
.comments-template ol li{
	margin: 10px 0 0 0;
	line-height: 15px;
	padding: 0 0 10px;
}
 
.comments-template h2, .comments-template h3{
	font-size: 1.2em;
}
 
.commentmetadata{
	font-size: 0.9em;
}
 
.comments-template p.nocomments{
	padding: 0;
}
 
.comments-template textarea{
	font-size: 0.9em;
}
 
/*
--------------- SIDEBAR ---------------
*/

.sidebar {
text-align: left;
width: 160px;
float: left;
padding: 20px;
}

.sidebar h2 {
font-size: 1.1em;
margin-bottom: 5px;
}

.sidebar ul li {
list-style-type: none;
margin-bottom: 15px;
}

.sidebar ul ul li {
margin-bottom: 0px;
}

.sidebar ul ul li a{
font-weight: normal ;
}

/*
--------------- FOOTER ---------------
*/

#footer {
position: relative;
clear: both;
font-size: 0.8em;
padding : 10px 20px ;
border-top: 1px solid gray;
}

#footer p{
text-align: right;
}

Le code html généré n'est pas très propre mais ce sont pour beaucoup des fonctions WordPress que je ne contrôle pas ...
Le menu est de type <ul> <li> imbriqués.

Si une bonne âme pouvait m'aider à résoudre cet épineux problème, j'en serait ravie !

A bientôt !
Modifié par nestorquick (18 Dec 2009 - 13:07)

Yo!

Alors, si il n'y a pas autre chose, je pense que j'ai trouvé (sous IE7 en tout cas)

À priori, le problème viens du position:absolute de .menu ul li ul
Au chargement de la page, c'est la dernière div appelée qui prend la première place (sauf indication contraire). FF et Safari font malgré tout passer les div "absolute" devant tout le monde, voilà pourquoi ton menu passe bien.
Mais sous IE, cette même div reste en dessous. Du coup, avec ta souris, quand tu arrive au niveau de "content-page", tout se passe bien jusqu'à la fin du padding, puis hop, le menu disparait puisqu'il passe en dessous de content-page.

Pour régler ce soucis, j'ai déplacé certaines propriétés de ton niveau 2 :

.menu ul li ul{ 
display: none; 
} 
 
.menu ul li:hover ul{ 
display: block;
border: 1px solid gray; 
position: absolute; 
border-bottom: 0; 
} 

Je l'ai testé sous IE, FF et IE8 avec le moteur de rendu IE7 : ca semble marcher. Si ce n'est pas encore parfait, la piste à creuser est celle des "position:absolute." Si tu a moyen de mettre un attribut de style "position:absolute" à ta dic "content-page", alors tu pourras jouer avec les z-index pour permettre à ton menu de rester au dessus de tout.


Tiens nous au courant!

Merci bien lautrejojo !

J'ai en effet un peu bidouillé le code sur tes conseils et réajusté deux trois détails, et c'était bien le problème ... j'avoue que IE est toujours aussi bizarre !

Finalement, j'ai opté pour un menu déroulant vers le haut, ce qui règle le problème et qui est assez ravissant ... On fait comme on peut !

Encore merci.

A bientôt !