CSS et balise DT DL DD

Bonjour à tous,

Je me suis fait un petit menu déroulan en utilisant les DD DT DL. Mais le problème est que lors du sorval, le contenu du menu aparait décalé vers la droite, avec un espace entre le bord gauche les poins de sous menui.
J'aimerais que lors de l'affichage des sousmenu, que sa longeur prennent tout la longeur du menu.

Voici le code pour que vous puissiez facilement tester.

Code:

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
<html>
<head>
 
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('menuquicklink'+i)) {document.getElementById('menuquicklink'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
 
 
<style type="text/css">
<!-- 
#menuquicklink {
	position: absolute;
	top: 0;
	left: 0;
	z-index:100;
	width: 100%;
}
 
#menuquicklink dl {
	float: left;
	margin: 0 1px;
}
 
#menuquicklink dt {
	cursor: pointer;
	text-align: center;
	background: #014578;
	border: 1px solid gray;
	color:white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: 14px;
	font-weight: normal;
}
 
#menuquicklink dd {
	border: 1px solid gray;
	background: #014578;
	text-align: left;
}
 
#menuquicklink li {
	text-align: left;
	background: #014578;
	margin: 0;
	padding: 0;
	list-style-type: none;
 
}
 
#menuquicklink li a, #menuquicklink dt a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	color:white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: 20px;
	font-weight: normal;
	text-align: left;
}
 
#menuquicklink li a:hover, #menuquicklink dt a:hover {
	background-color:#005A9B;
}
 
 
-->
</style>
 
 
</head>
<body>
 
<div id="menuquicklink">
 
	<dl onmouseover="javascript:montre('menuquicklink1');" onmouseout="javascript:montre();">			
		<dt >Menu 1</dt>
			<dd id="menuquicklink1"	>
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
 
			</dd>
	</dl>
 
</div>
 
</body>
</html>

D'avance merci ç!