[résolu] Menu dynamique via CSS

Bonjour à tous.

J'ai intégré un menu déroulant dans un site via CSS...

je rencontre juste un petit souci sous IE.

le menu est constitué de listes <ul><li></li></ul> imbriquées.

j'ai un maximum de deux niveaux pour certains items.

et il se trouve qu'IE ne parvient pas à exécuter ça :

div#sub_navigation_zone li:hover li:hover ul {display:block;}

div#sub_navigation_zone {
	background-image:url(/themes/public/img/menu_back_middle.jpg);
	padding:10px 0;
	}
div#sub_navigation_zone ul {
	display:block;
	margin:0;
	padding:10px 0;
	}			
div#sub_navigation_zone ul ul ul {background-color:#6590D2;}
div#sub_navigation_zone ul ul {
	border:4px solid #FFF;
	background-color:#003188;
	}
div#sub_navigation_zone ul {
	width:200px;
	list-style:none;
	background-color:#20246B;
	}
div#sub_navigation_zone li {
	position:relative;
	padding:1px;
	padding:0 10px;
	z-index:9;
	}
div#sub_navigation_zone li.folder ul {
	position:absolute;
	left:100px; 
	top:5px;
	}
div#sub_navigation_zone li.folder>ul { left:100px; } 
div#sub_navigation_zone a {
	padding:2px;
	font-weight:normal;
	width:100%; 
	}
div#sub_navigation_zone li>a { width:auto; } 

	/* hovers with specificity */

div#sub_navigation_zone li.folder:hover { z-index:10; }		
div#sub_navigation_zone ul ul, div#sub_navigation_zone li:hover ul ul {display:none;}
div#sub_navigation_zone li:hover ul {display:block;}
div#sub_navigation_zone li:hover li:hover ul {display:block;}

le code html

<div id="sub_navigation_zone">
	<ul id="menu">
		<li class="folder"><a href="/toto_et_le_cafe.htm" title="toto et le café">toto et le café</a>
			<ul>
				<li class="folder"><a href="/toto.htm" title="toto">toto</a>
					<ul>
						<li><a href="/historique.htm" title="Historique">Historique</a></li>
						<li><a href="/qualite.htm" title="Qualité">Qualité</a></li>
						<li><a href="/culture.htm" title="Culture">Culture</a></li>
					</ul>
				</li>
				<li class="folder"><a href="/le_cafe.htm">Le café</a>
					<ul>
						<li><a href="/le_cafe_en_quelques_chiffres.htm" title="Le café en quelques chiffres">Le café en quelques chiffres</a></li>
						<li><a href="/le_fruit.htm" title="Le fruit">Le fruit</a></li>
						<li><a href="/origines.htm" title="Origines">Origines</a></li>
						<li><a href="/les_varietes.htm" title="Les variétés">Les variétés</a></li>
						<li><a href="/de_la_plante_a_la_tasse.htm">De la plante à la tasse</a></li>
						<li><a href="/Les_concepts_capsules_toto>.htm" title="Les concepts capsules toto">Les concepts capsules toto</a></li>					
						<li><a href="/espace_sante-beaute.htm" title="Espace sante-beauté">Espace santé-beauté</a></li>
					</ul>
				</li>
				<li><a href="/le_developpement_durable.htm">Le développement durable</a></li>
				<li><a href="/idees_recettes.htm" title="Idées recettes">Idées recettes</a></li>
			</ul>
		</li>
		<li><a href="/entre_vous_et_nous.htm" title="Entre vous &amp; nous">Entre vous &amp; nous</a></li>
		<li><a href="/carrieres.htm" title="Carrières">Carrières</a></li>
		<li><a href="/la_societe.htm" title="La société">La société</a></li>
		<li><a href="/contactez-nous.htm" title="Contactez-nous">Contactez-nous</a></li>
	</ul>
</div>

Modifié par ernstein (27 Sep 2006 - 11:49)

Internet Explorer 6 et inférieurs ne comprennent la pseudo-classe :hover que sur les éléments a (liens).

Comme on n'est pas censé entourer un élément de type bloc (ul, li) d'un lien, il faudra alors utiliser Javascript pour créer l'effet dynamique.

Bien le bonjour et le merci mpop.

Moi qui pensais faire un truc genre javascript less...

Merci pour ce retour à la réalité... je vais chercher de ce coté.

Bonne journée