Création d'un sous sous-menu

**Tonii** · 27/12/2010, 10h27

Bonjour à tous,

J'ai un menu horizontal avec des sous-menus. Jusque la pas de problème, mais j'aimerais créer des sous sous-menu.
Voici mon code css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
.bg {background: url(images/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}
 
.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}
 
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
 
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
 
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
 
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

Et voici mon code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>CSS Menu Maker</title>
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
 
<div>
<ul class="menu">
	<li class="top"><a href="#" class="top_link"><span>Menu 1</span></a></li>
	<li class="top"><a href="#" class="top_link"><span>Manue 2</span></a>
		<ul class="sub">
			<li><a href="#">Menu 2.1</a></li>		
			<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
            <li><a href="#">Menu 2.4</a></li>
            <li><a href="#">Menu 2.5</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" class="top_link"><span>Menu 3</span></a>
		<ul class="sub">
			<li><a href="#">Menu 3.1</a></li>		
            <li><a href="#">Menu 3.2<a></li>
            <li><a href="#">Menu 3.3</a></li>
            <li><a href="#">Menu 3.4</a></li>
		</ul>
	</li>
	<li class="top"><a href="#" class="top_link"><span>Menu 4</span></a></li>
	<li class="top"><a href="#" class="top_link"><span>Menu 5</span></a></li>
</ul>
</div>
 
</body>
</html>

Si vous aviez une idée je veux bien

Merci!

**e-fitz** · 27/12/2010, 11h46

Bonjour,

tu rajoutes un ul dans un li et tu as un sous menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<ul class="sub">
			<li><a href="#">Menu 2.1</a>
			<ul>
			<li>sous menu 1</li>
			<li>sous menu 2</li>
			</ul>
			</li>		
			<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
            <li><a href="#">Menu 2.4</a></li>
            <li><a href="#">Menu 2.5</a></li>
		</ul>

Puis dans ton css tu mets quand tu veux l'afficher ou non :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 .menu ul li ul {
	display:none
 }
 
 .menu ul li:hover ul{
	display:block
 }

Je n'ai mis aucune position je te laisse faire comme tu désires.

Bonne journée

**Tonii** · 27/12/2010, 12h03

Merci e-fitz!!

J'ai fait ce que tu m'as dit ca marche parfaitement, j'ai aussi rajouté dans le nouveau <ul> class="sub" et c'est nickel!

Merci!

**Tonii** · 04/01/2011, 16h00

Re bonjour et excellente année 2011 à tous,

Je me permets de revenir vers vous, car en fait le menu marche très bien sous IE. En revanche sous FF et Chrome le sous sous-menu reste affiché...

Comment faire pour le rendre compatible pour ces deux navigateurs?

Merci beaucoup à tous!

**e-fitz** · 04/01/2011, 22h53

Bonsoir,

donne nous ton code html et ton css pour qu'on puisse t'aider un peu plus.

Bonne soirée

**Tonii** · 05/01/2011, 10h22

Bonjour e-fitz, voici mon code:

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
.bg {background: url(images/button4.gif);}
.menu {margin:100px 0px 0px 0px; padding:0px 0px 0px 0px; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; z-index: 1; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative}
.menu li.topinput {display:block; float:left; position:relative}
.menu li.topinput span {display:block; float:left; height:40px; line-height:33px; color:#F8F8F8; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px;}
.menu li.topinput input[type=text] {margin:7px 0px 0px 12px; font-family: arial, verdana, sans-serif; font-size: 11px; font-weight: bold; color: #000000; background-color: #EEEEEE; border: 1px solid #D30000;  width: 200px; height:16px; }
.menu li.topinput input[type=submit] {margin:8px 0px 0px 12px; font-family: arial, verdana, sans-serif; font-size: 11px; font-weight: bold; color: #000000; background-color: #EEEEEE; border: 1px solid #D30000;  width: 50px; height:21px;}
.menu li.topinput input[type=submit]:hover {font-family: arial, verdana, sans-serif; font-size: 11px; font-weight: bold; color: #ffffff; background-color: #000000; border: 1px solid #D30000; width: 50px; height:21px;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#F8F8F8; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 5px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}
 
.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}
 
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
 
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
 
.menu ul li ul {display:none;}
.menu ul li:hover ul{display:block;}
 
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #E8E8E8; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:bold; display:block; font-size:11px; height:20px; width:200px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#D30000; color:#ffffff; Font-weight: bold;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
 
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:80px; top:10px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:200px; z-index:200; height:auto;}

Et mon HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>CSS Menu Maker</title>
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
 
<div>
 
<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Menu 1</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Menu 2</span></a>
 <ul class="sub">
  <li><a href="#">Menu 2.1</a></li>		
      <ul>
          <li>sous menu 2.1.1</li>
          <li>sous menu 2.1.2</li>
      </ul>
  <li><a href="#">Menu 2.2</a></li>
  <li><a href="#">Menu 2.3</a></li>
 </ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Menu 3</span></a>
 <ul class="sub">
  <li><a href="#">Menu 3.1</a></li>		
  <li><a href="#">Menu 3.2<a></li>
 </ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Menu 4</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Menu 5</span></a></li>
 
</ul>
</div>
</body>
</html>

Merci beaucoup!

**e-fitz** · 05/01/2011, 11h56

Bonjour,

Je ne suis pas chez moi donc je ne peux tester mais est ce que tu as essayé en mettant un doctype (à ma connaissance seul ie s'en sert réellement mais on ne sait jamais.)

Vérfie aussi l'ordre des balises css (je n'ai pas eu le temps de regarder c'est juste une piste). En effet, une déclaration css peut en effacer une autre si elle est postérieur.

Si tu n'as rien trouvé dis moi le je regarderai ce soir.

Bonne journée

**Tonii** · 05/01/2011, 12h14

re Bonjour e-fitz, merci pour ta réponse!
J'ai bien un Doctype dans ma page HTML le voici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

J'essaye depuis plus d'nue heure en changeant l'ordre des balises CSS et y a rien qui marche. J'ai peut-etre pas trouvé le bon ordre...

Je suis vraiment embêté avec ce menu... A la base on m'avait dit qu'il devait fonctionner sous IE, les autres navigateurs c'était pas grave et maintenant faut que ca fonctionne sous Chrome...

Si je trouve d'ici ce soir je posterai une réponse. Sinon je veux bien un petit coup de main si tu as le temps

Merci beaucoup!

**e-fitz** · 05/01/2011, 13h49

Bonjour,

je viens de tester le code que tu as posté il fonctionne chez moi sous ie8, ie7, ff et chrome. Pour qu'il fonctionne sous ie6 il faut soit mettre des hacks au niveau des ul li (ie6 accepte le hover que sur les balises de liens).
Ou encore utiliser un fichier de configuration .htc

Sinon pour ton menu peut être as tu des restes dans le cache de tes navigateurs.

Si tu as une url ou l'erreur se produit tu peux nous la donner (par mp si tu ne veux pas la divulger à tout le monde).

Bonne journée

**Tonii** · 05/01/2011, 14h24

e-fitz tu as bien le sous sous-menu "sous menu 2.1.1" ???

Moi je l'ai aussi sous Chrome mais il est affiché en permanance, alors que si on a pas la souris sur "Menu 2.1" on devrait avoir le "sous menu 2.1.1"...

J'ai vidé le cache de Chrome et ca ne marche pas non plus...

En tout cas merci d'avoir pris le temps de tester et de me répondre!

Je vais continuer de chercher...

**Tonii** · 05/01/2011, 14h49

Ok e-fitz merci pour ton aide précieuse!!!

Donc mon problème est réglé, ce n'était pas un problème de CSS , j'avais un </li> mal placé.... Sous IE ca marchait quand même mais pas sous Chrome..;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<li class="top"><a href="#" class="top_link"><span>Menu 3</span></a></li>
 <ul class="sub">
  <li><a href="#">Menu 3.1</a></li>		
  <li><a href="#">Menu 3.2<a></li>
 </ul>

Ce <li> devait etre à la fin englobant la balise <ul> et non a cet endroit.... Merci pour tout!!

**e-fitz** · 05/01/2011, 15h32

Bonjour,

content que tu es trouvé la solution ^^.

Bonne journée

Création d'un sous sous-menu

CSS

Discussions similaires

Partager

Partager