Bonjour,
J'ai un petit soucis avec mon menu sous IE 7, que vous pouvez voir ici
Lorsqu'on parcours un menu comme sur l'exemple tout fonctionne bien. Seulement lorsque l'on quitte le menu et qu'on revient dessus ensuite les block des sous menu que l'on a visité auparavant réaparaissent comme sur cet exemple .
Je ne comprends pas vraiment d'ou peut venir le problème. Car ce menu marche très bien sous IE 8 et sous firefox. La seule modification que j'ai apporté pour IE 7 est la suivante :
par
et rajouter ce position:absolute a ce niveau :
au lieu de :
Je vous mets le code complet CSS ci dessous :
Merci d'avance pour vos éventuelles réponses.
Modifié par ccsinge (25 Jun 2009 - 16:58)
J'ai un petit soucis avec mon menu sous IE 7, que vous pouvez voir ici
Lorsqu'on parcours un menu comme sur l'exemple tout fonctionne bien. Seulement lorsque l'on quitte le menu et qu'on revient dessus ensuite les block des sous menu que l'on a visité auparavant réaparaissent comme sur cet exemple .
Je ne comprends pas vraiment d'ou peut venir le problème. Car ce menu marche très bien sous IE 8 et sous firefox. La seule modification que j'ai apporté pour IE 7 est la suivante :
div#menu ul ul { position: absolute; display:none; border:1px solid;width:120px}
par
div#menu ul ul { display:none; border:1px solid;width:120px}
et rajouter ce position:absolute a ce niveau :
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 { position: absolute; display:block;}
au lieu de :
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 { display:block;}
Je vous mets le code complet CSS ci dessous :
div#menu a {color:#000000; }
div#menu ul { padding: 0; margin:0px; background: white; text-align:center; z-index:101;}
div#menu li {background:#E0E0E0; z-index:101; }
div#menu li:hover {background:#F2F2F2;}
div#menu li.sousmenu:hover {background: #F2F2F2; }
/* rejout couleur de fond */
div#menu li.sousmenu {background-color:#E0E0E0}
/* rajout pr pour fleche direction bas et couleur de fond*/
div#menu li.plop { background-color: #E0E0E0;}
/* une petite bordure en top*/
div#menu ul li { position:relative; list-style: none; float:left; }
div#menu ul ul { display:none; border:1px solid;width:120px}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:120px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveaumois,
div#menu ul.niveaumois li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 { position: absolute; display:block;}
div#menu ul.niveau2 {top:-1px; left: 120px;}
div#menu ul.niveau3 {top:-1px; left: 120px;}
div#menu ul.niveau4 {top:-1px; left: 120px;}
/* rajout de couleur de fond et de survol */
div#menu ul.niveau3 li { background: #F2F2F2; }
div#menu ul.niveau3 li:hover { background:#E0E0E0}
/* rajout de couleur de fond et de survol */
div#menu ul.niveau4 li { background: #E0E0E0 ; }
div#menu ul.niveau4 li:hover { background:#F2F2F2}
a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none;
}
a.info:hover{
z-index:25;
background-color:#FFF
}
a.info span{
display: none;
}
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}
Merci d'avance pour vos éventuelles réponses.
Modifié par ccsinge (25 Jun 2009 - 16:58)
