Problème affichage menu déroulant

**barbapapa2** · 03/11/2006, 11h07

Bonjour,

Je débute en programmation html et suis confronté à 2 problèmes que je n'arrive pas à résoudre.

1) Mon menu déroulant vertical m'affiche en permanence le dernier sous-menu (Contact).

2) Certaines cases de mon menu verticale nécessitent un élargissement en hauteur afin de faire tenir le texte... hors les proportions sont les mêmes pour toutes les cases... de ce fait une partie de mon texte est masqué... et je ne souhaite pas l'élargir en longueur ("maintenance & navigabilité", "manuel des procédures associées", "Notes de service et d'information").

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
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
 
<dl id="menu" name="menu">
 
		<dt class="Style14" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">Agr&eacute;ments</dt>
 
		<dt class="Style14" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Qualit&eacute;</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Documents</a></li>
					<li><a href="#">Formulaires</a></li>
					<li><a href="#">Ponctualité</a></li>
					<li><a href="#">Statistiques d'audits</a></li>
					<li><a href="#">Flash Qualité</a></li>
					<li><a href="#">Bulletins de Sécurité des vols</a></li>
					<li><a href="#">Répertoire Documentaire Compagnie</a></li>
				</ul>
			</dd>	
 
		<dt class="Style14" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Maintenance & Navigabilité</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Documents</a></li>
					<li><a href="#">Aircraft Data Sheet</a></li>
					<li><a href="#">Production</a></li>
					<li><a href="#">Staff</a></li>
					<li><a href="#">Engineering</a></li>
					<li><a href="#">Interior</a></li>
				</ul>
			</dd>
 
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Manuel des Proc&eacute;dures Associ&eacute;es </dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Direction Générale</a></li>
					<li><a href="#">Qualité</a></li>
					<li><a href="#">Maintenance</a></li>
					<li><a href="#">Gestion de Navigabilité</a></li>
					<li><a href="#">Opérations</a></li>
					<li><a href="#">Escales</a></li>
					<li><a href="#">Bureau d'Etudes</a></li>
				</ul>
			</dd>
 
		<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">Notes de Service &amp; d'information </dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Direction Générale</a></li>
					<li><a href="#">Qualité</a></li>
					<li><a href="#">Direction Ressources Humaines</a></li>
					<li><a href="#">Direction Opérations Aériennes</a></li>
					<li><a href="#">Direction Opérations Sol</a></li>
					<li><a href="#">Officier Sécurité des Vols</a></li>
					<li><a href="#">P.N.C</a></li>
					<li><a href="#">Resp. Désigné Entretien</a></li>
					<li><a href="#">Resp. Entretien en Ligne</a></li>
					<li><a href="#">Bureau Technique</a></li>
					<li><a href="#">P.C.T</a></li>
					<li><a href="#">Logistique</a></li>
					<li><a href="#">Bureau d'Etudes</a></li>
					<li><a href="#">Escales</a></li>
				</ul>
			</dd>
 
		<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">Op&eacute;rations A&eacute;riennes </dt>
 
		<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">Op&eacute;rations Sol </dt>
 
 
		<dt onmouseover="javascript:montre('smenu8');" onmouseout="javascript:montre();">Escales</dt>
 
 
		<dt onmouseover="javascript:montre('smenu9');" onmouseout="javascript:montre();">Divers</dt>
 
		<dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">Organigrammes</dt>
			<dd id="smenu10" onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Compagnie</a></li>
					<li><a href="#">Qualité</a></li>
					<li><a href="#">Maintenance & Gestion Nav</a></li>
					<li><a href="#">Opérations Aériennes</a></li>
					<li><a href="#">Opérations Sol</a></li>
				</ul>
			</dd>
 
			<dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">Contact</dt>
			<dd id="smenu11" onmouseover="javascript:montre(smenu11)" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Personnel Sol</a></li>
					<li><a href="#">P.N.T.</a></li>
				</ul>
  </dd>
</dl>

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
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
body {
	padding:0px;
	margin:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #003366;
	line-height: 16px;
	text-decoration: none;
	background-color: #c0dffd;
	background-image: url(mm_arrow.gif);
	background-repeat: no-repeat;
	background-position: 14px 45%;
	letter-spacing: 0.1em;
	display: block;
	font-weight: normal;
}
dl, dt, dd, ul, li {
	margin: 0;
	list-style-type: none;
	list-style-position: outside;
	padding-top: 8;
	padding-right: 6;
	padding-bottom: 10;
	padding-left: 26;
}
#menu {
	position: absolute;
	top: 171px;
	left: 0px;
	width: 198px;
	background-color: #c0dffd;
}
 
#menu dt {
	cursor: pointer;
	height: 35px;
	line-height: 35px;
	text-align: left;
	font-weight: normal;
	margin-top: 2px;
	margin-right: 0;
	margin-bottom: 2px;
	margin-left: 0;
	letter-spacing: 0.1em;
	background-image: url(mm_arrow.gif);
	background-repeat: no-repeat;
	background-position: 14px 45%;
	text-indent: 25px;
	padding: 0px;
	float: Aucune;
	background-color: #e6f3ff;
}
 
#menu dt:hover {
	text-transform: none;
	color: #FF6600;
	background:#ffffff;
	text-decoration: none;
	background-image: url(mm_arrow.gif);
	background-repeat: no-repeat;
	background-position: 14px 45%;
	font-size: 11px;
}
 
#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 250px;
background: #e6f3ff;
border: 1px solid gray;
}
 
#menu ul {
padding: 2px;
}
#menu li {
	text-align: left;
	font-size: 11px;
	height: 18px;
	line-height: 18px;
	font-weight: normal;
}
#menu li a, #menu dt a {
	color: #003366;
	text-decoration: none;
	display: block;
	font-size: 11px;
}
 
#menu li a:hover {
	text-transform: none;
	color: #FF6600;
	background:#ffffff;
	text-decoration: underline;
	font-size: 11px;
}
 
 
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
 
 
</style>

Je bloque sur ces points
Merci pour vos conseils et votre aide.

Invité · 03/11/2006, 11h23

Tu trouveras les meilleurs menu déroulants sur CSSPlay. Ils ont l'avantage d'être compatible (sinon c'est spécifié), entièrement en CSS, pas de javascript, 100% libre de droit. Y'a juste à choisir celui qui correspond à ce que tu veux faire et à changer les styles.

**barbapapa2** · 03/11/2006, 11h51

Merci pour le lien qui au demeurant est très intéressant.

Mais je souhaite conserver mon menu actuel et je crois que dans tout les cas ça ne résoudra pas mon problème n° 2 !!!

Merci encore pour ton aide

**trotters213** · 04/11/2006, 10h18

quand tu as recopié le code tu as oublié le javascript.
Essaie ceci :

Code HTML :

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<html>
<head>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
        for (var i = 1; i<=11; i++) {//11 c'est le nombre de menu
                if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
        }
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
body {
padding:0px;
margin:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #003366;
line-height: 16px;
text-decoration: none;
background-color: #c0dffd;
background-image: url(mm_arrow.gif);
background-repeat: no-repeat;
background-position: 14px 45%;
letter-spacing: 0.1em;
display: block;
font-weight: normal;
}
 
dl, dt, dd, ul, li {
margin: 0;
list-style-type: none;
padding:5px;
}
 
#menu {
position: absolute;
top: 171px;
left: 0px;
width: 198px;
background-color: #c0dffd;
}
 
#menu dt {
cursor: pointer;
text-align: left;
margin:2px 0px;
background-image: url(mm_arrow.gif);
background-repeat: no-repeat;
background-position: 14px 45%;
background-color: #e6f3ff;
}
 
#menu dt:hover {
text-transform: none;
color: #ff6600;
background:#ffffff;
text-decoration: none;
font-size: 11px;
}
 
#menu dd {
position: absolute;
left: 8em;
margin-top: -1.4em;
width: 250px;
background: #e6f3ff;
border: 1px solid gray;
}
 
#menu ul {
padding: 2px;
}
 
#menu li {
text-align: left;
font-size: 11px;
font-weight: normal;
}
 
#menu a {
color: #003366;
text-decoration: none;
display: block;
font-size: 11px;
}
 
#menu a:hover {
color: #ff6600;
background:#ffffff;
text-decoration: underline;
}
</style>
 
</head>
<body>
 
<dl id="menu">		
		<dt>Agr&eacute;ments</dt>						
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Qualit&eacute;</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Documents</a></li>
					<li><a href="#">Formulaires</a></li>
					<li><a href="#">Ponctualité</a></li>
					<li><a href="#">Statistiques d'audits</a></li>
					<li><a href="#">Flash Qualité</a></li>
					<li><a href="#">Bulletins de Sécurité des vols</a></li>
					<li><a href="#">Répertoire Documentaire Compagnie</a></li>
				</ul>
			</dd>
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Maintenance & Navigabilité</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Documents</a></li>
					<li><a href="#">Aircraft Data Sheet</a></li>
					<li><a href="#">Production</a></li>
					<li><a href="#">Staff</a></li>
					<li><a href="#">Engineering</a></li>
					<li><a href="#">Interior</a></li>
				</ul>
			</dd>
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Manuel des Proc&eacute;dures Associ&eacute;es </dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Direction Générale</a></li>
					<li><a href="#">Qualité</a></li>
					<li><a href="#">Maintenance</a></li>
					<li><a href="#">Gestion de Navigabilité</a></li>
					<li><a href="#">Opérations</a></li>
					<li><a href="#">Escales</a></li>
					<li><a href="#">Bureau d'Etudes</a></li>
				</ul>
			</dd>			
		<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">Notes de Service &amp; d'information </dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Direction Générale</a></li>
					<li><a href="#">Qualité</a></li>
					<li><a href="#">Direction Ressources Humaines</a></li>
					<li><a href="#">Direction Opérations Aériennes</a></li>
					<li><a href="#">Direction Opérations Sol</a></li>
					<li><a href="#">Officier Sécurité des Vols</a></li>
					<li><a href="#">P.N.C</a></li>
					<li><a href="#">Resp. Désigné Entretien</a></li>
					<li><a href="#">Resp. Entretien en Ligne</a></li>
					<li><a href="#">Bureau Technique</a></li>
					<li><a href="#">P.C.T</a></li>
					<li><a href="#">Logistique</a></li>
					<li><a href="#">Bureau d'Etudes</a></li>
					<li><a href="#">Escales</a></li>
				</ul>
			</dd>			
		<dt>Op&eacute;rations A&eacute;riennes </dt>			
		<dt>Op&eacute;rations Sol </dt>			
		<dt>Escales</dt>			
		<dt>Divers</dt>			
		<dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">Organigrammes</dt>
			<dd id="smenu10" onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Compagnie</a></li>
					<li><a href="#">Qualité</a></li>
					<li><a href="#">Maintenance & Gestion Nav</a></li>
					<li><a href="#">Opérations Aériennes</a></li>
					<li><a href="#">Opérations Sol</a></li>
				</ul>
			</dd>			
		<dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">Contact</dt>
			<dd id="smenu11" onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="#">Personnel Sol</a></li>
					<li><a href="#">P.N.T.</a></li>
				</ul>
			</dd>
</dl>
</body>
</html>

Le rendu est plus propre, c'est le même sous IE et FF, dis-moi si ça te convient.

Problème affichage menu déroulant

JavaScript

Discussions similaires

Partager

Partager