Discussion :

[GillesV]

Bonjour,
Je viens de me rendre compte d'une limitation qui m'échappe complètement, pas à vous j'espère.
Impossible de mettre plus de 5 items dans mes menus :

Le HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<li><a href="#">Modules</a>
	<ul>
		<li><a href="'.$_SERVER['PHP_SELF'].'?main=modules.php&id_session='.$id_session.'&liste_mod=1">Liste</a></li>
		<li><a href="'.$_SERVER['PHP_SELF'].'?main=modules.php&id_session='.$id_session.'&creer_module">Nouveau</a></li>
		<li><a href="coco">coco</a></li>
		<li><a href="coco">coco</a></li>
		<li><a href="coco">coco</a></li>
		<li><a href="coco">coco qui ne s'affiche pas</a></li>
	</ul>
</li>

et le CSS : (repris du web et adapté à ce que je voulais

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
#menu-demo2, #menu-demo2 ul{
	padding:0px;
	margin:0px;
	list-style:none;
	text-align:left;
	z-index:9999;
}
#menu-demo2 li{
	display:inline-block;
	position:relative;
	border-radius:10px 10px 0 0;
}
#menu-demo2 ul li{
	display:inherit;
	border-radius:0;
}
#menu-demo2 ul li:hover{
	border-radius:0;
}
#menu-demo2 ul li:last-child{
	border-radius:0 0 10px 10px;
}
#menu-demo2 ul{
	position:absolute;
	max-height:0;
	left: 0;
	right: 0;
	overflow:hidden;
	-webkit-transition-duration: .5s, .3s;
	-webkit-transition-timing-function: linear, ease-out;
	-moz-transition-duration: .5s, .3s;
	-moz-transition-timing-function: linear, ease-out;
	transition-duration: .5s, .3s;
	transition-timing-function: linear, ease-out;
}
#menu-demo2 li:hover ul{
	max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:nth-child(n+1){
	border: 1px solid #333;
	border-top-color: #707070;
	background-color: #5E5E5E;
	background: -moz-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
	background: -webkit-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
	background: -ms-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
	background: -o-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
	background: linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent;
}
/* background des liens sous menus */
#menu-demo2 li:nth-child(n+1) li:hover{
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:hover, #menu-demo2 li:hover{
	background-color: #3E3E3E;
	background: -moz-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
	background: -webkit-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
	background: -ms-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
	background: -o-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
	background: linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent;
	text-shadow: -1px -1px 0 #000;
}
/* les a href */
#menu-demo2 a{
	text-decoration:none;
	display:block;
	padding:10px 32px;
	color:#fff; /*couleur txt menu root*/
	font-family:arial;
}
#menu-demo2 ul a{
	padding:12px;
}
#menu-demo2 li:hover li a{
	color:#fff; /*coulteur txt sous-menus*/
 
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
	color:yellow; /*couleut txt tous les menus au survol*/
}

Merci pour l'éclairage...
Gilles

[Invité]

Bonjour,
max-height:0; ??
idem pour max-height:15em;... c'est là qu'est l'os.

Normalement, on affiche/masque les sous-menus avec display:block; / display:none;.