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.