Construction d'un menu deroulant à 3 niveaux [Résolu]

Bonjour à tous,

J'aimerai construire un menu déroulant du type :

http://css.alsacreations.com/modelesmenus/vd2.htm[/url]

intégrant 3 niveaux au lieu des deux proposés par le gabarit.

J'ai fait plusieurs essais, mais je n'ai rien réussi de très concluant, si quelqun à une idée je suis preneur.

Merci d'avance

Thomas
Modifié par erehcab (07 Sep 2006 - 18:18)

Le même genre de menu :

http://www.cssplay.co.uk/menus/cascade.html

Salut,

Ouai exactement le même genre, mais c'est con ca passe pas sous IE 5 et 6 et il faut absolument que mon menu soit visible sous IE, j'ai pas le choix...

Il dit que c'est à cause de la pseudo-classe 'hover' liée au 'li', les gabarits d'Alsa n'utilise pas de pseudo-classe pour dérouler le menu du coup pas de problème avec IE et c'est plutôt vers ce systèm que je vais devoir me tourner.

Merci quand même, si jamais tu as une autre piste fait moi signe.

Thomas

Re salut, je vien de trouver mon bonheur sur le site vers lequel tu m'as envoyé.
Ce site est d'ailleur génial il y a vraiment énormément de choses à apprendre dessus.

Merci de me l'avoir fait connaitre.

Thomas

J'ai trouvé la solution à mon problème mais je n'en fait profiter personne ...

donc voilà ce que j'ai utilisé en provenance du superbe site :

http://www.cssplay.co.uk/

Partie HTML :

<div class="menu">
<ul>
<li><a href="../index.html">Item 1</a></li>
<li><a href="#nogo">Item 2</a></li>
<li class="sub"><a href="#nogo">Item 3 &#187;<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>

	<li><a href="../index.html">Item 3a</a></li>
	<li class="sub"><a href="#nogo">Item 3b &#187;<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="../index.html">Item 3bi</a></li>
			<li><a href="#nogo">Item 3bii</a></li>
			<li class="sub"><a href="#nogo">Item 3biii &#187;<!--[if IE 7]><!--></a><!--<![endif]-->

			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<li><a href="#nogo">Item 3biii-1</a></li>
					<li><a href="#nogo">Item 3biii-2</a></li>
					<li><a href="#nogo">Item 3biii-3</a></li>
					<li><a href="#nogo">Item 3biii-4</a></li>
				</ul>

			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">Item 3c</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

<li><a href="#nogo">Item 4</a></li>
<li><a href="#nogo">Item 5</a></li>
<li><a href="#nogo">Item 6</a></li>

</ul>
</div>

Partie CSS :

/* CSS Document */
<style type="text/css">
.menu {
z-index:1000;
font-size:90%;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
background:#3399FF;
height:26px;
}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFF;
text-indent:5px;
border-top:1px solid #EE7B00;
border-bottom:1px solid #EE7B00;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background:#d4d8bd; width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#FFF;}

.menu :hover > a {
color:#fff; 
background:#FFF;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px; 
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}
</style>

<!--[if IE 7]>
<style type="text/css">
.menu li.sub {margin-bottom:-2px;}
</style>
<![endif]-->

Voilà et encore merci à CSS PLAY.
Modifié par erehcab (07 Sep 2006 - 22:53)

Désolé de pas avoir répondu plus tôt, heureux que tu es pu trouver ton bonheur là bas