Discussion :

[bouille24]

Bonjour,
je cherche à faire un menu déroulant du 2 niveaux. Dans un menu vertical, quand on passe sur un bouton au survol, se déroule en dessous le 1er menu, puis si sous menu il y a, au survol il apparait sur le côté (voir exemple à cette adresse : http://pilote.mydistribution.fr/barb...age%20test.htm).

Quand le 1er menu se déroule et devrait pousser le bouton en dessous. Mais ce n'est pas cas

Dans l'exemple le sous menu d'art de la table ne pousse pas vers le bas le menu vase...

je tourne et retourne mon CSS que je ne vois plus où est mon erreur. Le voici, est ce que quelqu'un peut m'ouvrir les yeux et m'aider ??

Merci par avance !

Code :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
#menu
{
	float:left;
	width:190px;
	background:url(images/fond-menu-deroulant.jpg);
	background-repeat:repeat-y;
	background-position:left;
	background-color:#FDB000;
	padding-left:35px;
	z-index:100;
}
 
#menu ul {list-style-type:none; padding:0; margin:0;
}
#menu li {
	float:left;
	background-color:#FDB000;
	border-bottom:1px solid #fff;
 }
 
#menu li.sub {
	background-color:#FDB000;
	border-bottom:1px solid #fff;
}
 
#menu li, #menu li a {
	display:block; 
	color:#fff;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:18px; 
	line-height:40px; 
	width:200px; 
	font-weight:normal;
	text-decoration:none; 
	cursor:pointer; 
	text-align:left;
	/*padding-left:10px;
	*/height:40px;
	text-indent:10px;}
 
#menu table {
	border-collapse:collapse; 
	padding:0; 
	margin:0 -1px -1px;}
 
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:200px;}
 
#menu :hover {
	z-index:500; 
	white-space:nowrap;}
 
#menu :hover > a {
	z-index:500; 
	white-space:nowrap;}
 
#menu :hover ul {position:static;/* height:180px; margin-top:-1px;*/ /*background:#383838;*/}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {
	display:block; 
	position:absolute; 
	left:200px; 
	top:0; 
	height:auto; 
	z-index:500;
	/* border:1px solid #fff;*/}
 
#menu :hover ul li, #menu :hover ul li a {
	background:#FED77F; 
	text-align:left; 
	text-indent:10px; 
	height:30px;
	line-height:30px;
	border:none;}
#menu :hover ul li.fly a {background:#FED77F url(images/soumenu_fleche.jpg) no-repeat 180px center;}
#menu :hover ul :hover {position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#FED77F url(images/soumenu_fleche.jpg) no-repeat 180px center;}
#menu :hover ul li.fly:hover > a {background:#FED77F url(images/soumenu_fleche.jpg) no-repeat 180px center;}
#menu li ul li a{
	font-size:14px;
	color:#84339C;
	background:#fed77f url(images/fond_sousmenu.jpg) right repeat-y;
	border:none;
}
#menu li ul li ul li a, #menu :hover ul li.fly ul li a{
	font-size:12px;
	background-color:#FEEBBF;
	background-image:none;
}
#menu :hover ul li.fly ul li a:hover {
	font-weight:bold;
}

[Erwan31]

Bonjour,
pour commencer ton menu ne se déroulera pas sur IE6- puisque ces version n'avaient pas encore implémenté la pseudo-classe :hover sur les éléments autre que les liens.
La rubrique suivant ne se pousse pas parce que ton sous menu est en position absolute, donc son affiche n'aura pas d'influence sur autres élément du document.
Ton menu n'est de toute façon pas suffisament accessible.
Base toi sur ce modèle : http://www.k64.fr/menus/menu_v7/

[bouille24]

je vais essayé d'adapter celui là mon menu !