Avant (avec 3 niveaux):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css4.css" rel="stylesheet" type="text/css" />
<title>Mise en page avec fond pour sous menu</title>
</head>
<body>
<div id="menu" style="margin-left:150px;">
<ul class="niveau1">
<li><a href="mise_en_page_4.php">menu 1</a></li>
<li class="sousmenu"><a href="mise_en_page_4.php">menu 2</a>
<ul class="niveau2">
<li><a href="mise_en_page_4.php">Sous menu 2.1</a></li>
<li><a href="mise_en_page_4.php"">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 3</a></li>
<li class="sousmenu"><a href="mise_en_page_4.php">menu 4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="mise_en_page_4.php">Sous menu 4.1</a>
<ul class="niveau3">
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.2</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php"">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 5</a></li>
</ul>
</div>
</body>
</html>
le css correspondant :
body {behavior: url(csshover.htc);}
div#menu {width: 100px;}
/* fond blanc pour le menu */
div#menu a {color:#000000}
div#menu ul {padding: 0; width: 100px; border:1px solid; margin:0px; background: white}
/* fond different au survol de la souris pour les sous menu et les "basiques"*/
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
/* Rajout d'une petite fleche pour les sous menu */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 100px; display:none}
/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; border-left: 8px solid #BBB; width:84px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}
/* la bordure de chaque hauteur a une couleure de survol*/
div#menu li a:hover {border-left-color: red;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}
Avec 4 niveaux :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Mise en page avec fond pour sous menu</title>
</head>
<body>
<div id="menu" style="margin-left:150px;">
<ul class="niveau1">
<li><a href="mise_en_page_4.php">menu 1</a></li>
<li class="sousmenu">
<a href="mise_en_page_4.php">menu 2</a>
<ul class="niveau2">
<li><a href="mise_en_page_4.php">Sous menu 2.1</a></li>
<li><a href="mise_en_page_4.php"">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 3</a></li>
<li class="sousmenu">
<a href="mise_en_page_4.php">menu 4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="mise_en_page_4.php">Sous menu 4.1</a>
<ul class="niveau3">
<li class="sousmenu"><a href="mise_en_page_4.php">Sous sous menu 4.1.1</a>
<ul class="niveau4">
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1.1</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.2</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php"">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 5</a></li>
</ul>
</div>
</body>
</html>
et le css :
body {behavior: url(csshover.htc);}
div#menu {width: 100px;}
/* fond blanc pour le menu */
div#menu a {color:#000000}
div#menu ul {padding: 0; width: 100px; border:1px solid; margin:0px; background: white}
/* fond different au survol de la souris pour les sous menu et les "basiques"*/
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
/* Rajout d'une petite fleche pour les sous menu */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 100px; display:none}
/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; border-left: 8px solid #BBB; width:84px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}
/* la bordure de chaque hauteur a une couleure de survol*/
div#menu li a:hover {border-left-color: red;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}
Ce qui change, dans le css c'est plus :
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}
Mais
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}
et dans le code a la place de ,
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1</a></li>
c'est
<li class="sousmenu"><a href="mise_en_page_4.php">Sous sous menu 4.1.1</a>
<ul class="niveau4">
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1.1</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1.2</a></li>
</ul>
</li>
Et voila.
Si tu as des questions !
PS : J'ai volontairement enlevé le div de pub pour plus de claretée
]]>voilà en fait j'ai besoin d'un quatrième niveau de profondeur sur le super menu génialement cool de tuto-fr, is it possible ?
J'ai fait un test sans résultat :
voilà comment j'ai modifié le css :
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4
div#menu ul.niveau4 {top:1px; left: 81px;}
je me suis dit que cela permettrait un quatrième niveau ... mais quand je l'appelle avec une class="niveau4" via mon html, il n'entend rien le bougre !!
Est - ce quelque aurait une bonne âme pour m'aider ...
merci merci
à bientôt,
ilofr
(désolée si je me répète dans le thème detout de rien)