Menu déroulant invisible sous IE 6 nickel sous FF et IE7.

Bonjour à tous,

Je débute mon premier site entièrement en CSS et j'ai le souci suivant :
Mon menu déroulant fonctionne impeccablement sous FF et IE 7 mais celui-ci est invisible sous IE 6. Si l'un d'entre vous peut m'aider et me dire pourquoi.

Je vous donne l'adresse de la page :www.sibamstore.fr/index01.html[/url]

Voici le code html du menu :

<div class="nav">
	<div class="menu">
		<ul>
			<li id="informatique"><a href="" class="Style1">Informatique</a>
				<ul id="sousMenu">
					<li id="titreSousMenu">Pc de Bureau</li>
					<li><a href="pc_pa.html">Packs promo</a></li>
					<li><a href="ensemble_pc.html">Ensemble Pc bureau</a></li>
					<li><a href="unite_central.html">Unit&eacute;s centrales</a></li>
					<li id="titreSousMenu">Pc portables</li>
					<li><a href="portable_pac.html">Packs promo</a></li>
                    <li><a href="portable.html">Pc portables</a></li>
					<li id="titreSousMenu">Accessoires</li>
					<li><a href="imprimantes.html">Imprimantes</a></li>
					<li><a href="consommable.html">Consommables</a></li>
					<li><a href="logiciel.html">Logiciels</a></li>
					<li><a href="lecteur_multimedias.html">Lecteurs multim&eacute;dias</a></li>
					<li><a href="cle.html">Cl&eacute;s USB</a></li>
					<li><a href="webcams.html">Webcams</a></li>
					<li><a href="enceintes_pc.html">Enceintes pour PC</a></li>
					<li><a href="autres_pc.html">Autres</a></li>
				</ul>
			</li>
		</ul>
		<ul>
			<li id="television"><a href="">Télévision</a>
				<ul id="sousMenu">
					<li><a href="">Ecran plasma</a></li>
				</ul>
			</li>
		</ul>
		<ul>
			<li id="numerique"><a href="">Numérique</a>
				<ul id="sousMenu">
					<li><a href="">Appareil photo</a></li>
				</ul>
			</li>
		</ul>
		<ul>
			<li id="electro"><a href="">Electroménager</a>
				<ul id="sousMenu">
					<li><a href="">Lave vaiselle</a></li>
				</ul>
			</li>
		</ul>
		<ul>
			<li id="accessoires"><a href="">Accessoires</a>
				<ul id="sousMenu">
					<li><a href="">Ace</a></li>
				</ul>
			</li>
		</ul>
		<ul>
			<li id="cine"><a href="">Ciné Son</a>
				<ul id="sousMenu">
					<li><a href="">Ciné</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

et le code CSS du menu :

.nav {
	background:url(../images/nav.jpg);
	height:55px;
	width:960px;
	text-align:center; 
	z-index: 10;
}
.menu {
	font-family: arial, sans-serif;
	position:relative;
	margin:0px 0 0px 0;
	font-size:14px;
	margin:0px 0 0px 0;
	padding-left:50px;
	z-index:100;
}
.menu ul li a, .menu ul li a:visited {
	display:block;
	text-decoration:none;
	color:#FFFFFF;
	color:#fff;
	line-height:20px;	
	font-weight:bold;
	overflow:hidden;
	font-family: Arial, Helvetica, sans-serif;
	text-align:right;
	padding: 20px 10px 0 10px;  
}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li#informatique {float:left; position:relative; background:url(../images/informatique.jpg); height:55px; width:142px; font-size:14px;}
.menu ul li#television {float:left; position:relative; background: url(../images/television.jpg); height:55px; width:142px;}
.menu ul li#numerique {float:left; position:relative; background: url(../images/numerique.jpg); height:55px; width:142px}
.menu ul li#electro {float:left; position:relative; background: url(../images/electro.jpg); height:55px; width:142px;}
.menu ul li#accessoires {float:left; position:relative; background: url(../images/accessoires.jpg); height:55px; width:142px;}
.menu ul li#cine {float:left; position:relative; background: url(../images/cine.jpg); height:55px; width:142px;}
.menu ul li ul {display: none;}
.menu ul li ul#sousMenu a{
font-size:10px;
text-align:left;
display:block; 
height:15px;
padding:5px; 
}
.menu ul li ul#sousMenu li#titreSousMenu{
font-size:14px;
font-weight:bold;
text-decoration:underline;
color:#FFFFFF;
text-align:left;
display:block;
padding:5px; 
height:15px;
background-color:#CC0000;
}
/* specific to non IE browsers */
.menu ul li:hover a {
	color:#fff;
}
.menu ul li:hover ul {display:block; position:absolute; top:55px; left:0; width:142px;}
.menu ul li:hover ul li a.hide {background:#CC0000; color:#fff;}
.menu ul li:hover ul li:hover a.hide {
	color:#fff;
	background-color:#CC0000;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#CC0000; color:#FFFFFF;}
.menu ul li:hover ul li a:hover {
	color:#FFFFFF;
	background-color:#FF9900;
}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

Merci de vos réponses

jregarde les liens qui peuvent t'aider.
Modifié par yuluka (26 Sep 2007 - 13:29)

Merci de ta réponse Yuluka, mais cela ne semble pas fonctionner. J'ai placé ton code dans la partie .menu de mon CSS sans résultat.

oui j'ai tester sa marche pas lol. sinon va voir la peu etre cela va t'aider il y à des exemples. bon il y a utilisation de script java.

http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal


ici plus precisement :http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm
Modifié par yuluka (26 Sep 2007 - 13:29)

oui j'ai bien évidement regardé ces articles mais ils ne m'apportent pas la soluce à mon problème.

Je vois que mon post ne trouve pas ça solution, il me faut juste corriger ce menu pour qu'il fonctionne sous IE 6 merci de votre aide.

bonjour,

un javascript basé sur le "dom" peut t'aider a rendre ce menu actif dans IE6 sans toucher au html (a condition d'avoir un code valide ! ):
http://gcyrillus.free.fr/essai/menu_deroulant.html

il te faudrait pour cela , doubler tes regles css avec le pseudo :hover , par une classe , par exemple .over

Donner une id au conteneur principal du menu , pour le cibler plus facilement.

Le javascript va se charger de parcourir ta page et ajouter un évènement au dessus des li . onmouseover par exemple.

Une fonction attribué a cette évènement va appliquer la classe .over au li survolés et rendre ton menu déroulant.

c'est un principe parmi d'autres.

Par contre tu as un probleme de taille , qui risque de te crée des soucis : une id ne peut-etre utilisé qu'une seule fois par page!
#sousmenu et #titremenu , ne peuvent apparaitre qu'une fois , passe les en classe éventuellement.

Je ne sais pas si tu vas reussir a exploiter ce principe , mais commence deja par corriger tes problèmes d'id qui se repetent.

GC

Ok je regarde ça et je te tiens au jus, merci de ta réponse.

Bonjour Gcyrillus,

J'ai suivi tes conseils, à commencer par modifier mes div #sousmenu et #titremenu par des class.
J'ai donné aussi une id au conteneur principal du menu pour le cibler avec le javascript.
J'ai mis le javascript entre les balises <head></head>.
Par contre je ne sais pas si je dois modifier ma feuille de style ?

L'adresse de la page reste la même www.sibamstore.fr/index01.html

et voici le code réactualisée de ma feuille de style :

/* CSS Document */

@import 'global.css';

/*Menu déroulant*/
.nav {
	background:url(../images/nav.jpg);
	height:55px;
	width:960px;
	text-align:center; 
	z-index: 10;
}
.menu {
	font-family: arial, sans-serif;
	position:relative;
	margin:0px 0 0px 0;
	font-size:14px;
	margin:0px 0 0px 0;
	padding-left:50px;
	z-index:100;
}
ul{position:relative; }
.menu ul li {
position:relative;
}
.menu ul li a, .menu ul li a:visited {
	display:block;
	text-decoration:none;
	color:#FFFFFF;
	color:#fff;
	/*line-height:10px;*/	
	font-weight:bold;
	overflow:hidden;
	font-family: Arial, Helvetica, sans-serif;
	text-align:right;
	padding:20px 10px 0 10px;
	margin-top:-3px; 
}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li#informatique {float:left; position:relative; background:url(../images/informatique.jpg); height:55px; width:142px; font-size:14px;}
.menu ul li#television {float:left; position:relative; background: url(../images/television.jpg); height:55px; width:142px;}
.menu ul li#numerique {float:left; position:relative; background: url(../images/numerique.jpg); height:55px; width:142px}
.menu ul li#electro {float:left; position:relative; background: url(../images/electro.jpg); height:55px; width:142px;}
.menu ul li#accessoires {float:left; position:relative; background: url(../images/accessoires.jpg); height:55px; width:142px;}
.menu ul li#cine {float:left; position:relative; background: url(../images/cine.jpg); height:55px; width:142px;}
.menu ul li ul {display: none;}
.menu ul li ul.sousMenu a{font-size:10px;text-align:left;display:block; height:10px; padding:5px;}
.menu ul li ul.sousMenu li.titreSousMenu{font-size:14px;font-weight:bold;text-decoration:underline;color:#FFFFFF;text-align:left;display:block;
padding:5px; height:20px;background-color:#CC0000;margin-top:-3px;}
/* specific to non IE browsers */
.menu ul li:hover a {
	color:#fff;
}
.menu ul li:hover ul {display:block; position:absolute; top:55px; left:0; width:142px;}
.menu ul li:hover ul li a.hide {background:#CC0000; color:#fff;}
.menu ul li:hover ul li:hover a.hide {
	color:#fff;
	background-color:#CC0000;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#CC0000; color:#FFFFFF;}
.menu ul li:hover ul li a:hover {
	color:#FFFFFF;
	background-color:#FF9900;
}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

Peux-tu me dire si maintenant tout est correct s'il te plait ?

Merci.

bonsoir

désolé de ces jours d'absences.

Non cela ne vas pas , tu a oubli" de refermé la balise script:

</script> <!-- ici fin du script js -->

<![endif]-->
</head>

gc
Modifié par gcyrillus (07 Oct 2007 - 22:44)