[CSS] Problème de menu déroulant aide merci

ok voici le code html
Au fais se pas sur le menu mais sur le Sous Menu que je veux avoir images en GIF le menu1 merci pour veux réponse

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
<html>
 
<head>
charset=windows-1252">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Nouvelle page 1</title>
<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('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
</script>
</head>
 
 
</p>
<div style="position: absolute; width: 271px; height: 100px; z-index: 1; left: 264px; top: 19px" id="couche1" align="center">
	<img border="0" src="images/pagewebfulltuto1_02.gif" width="490" height="114"></div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: 163px; top: 176px" id="couche2">
	<div style="position: absolute; width: 343px; height: 208px; z-index: 2; left: 185px; top: 144px" id="couche5">
		<p align="center"><a target="_blank" href="gt.html">
		<img border="0" src="images/shakira1.gif" width="341" height="205"></a></div>
	<div style="position: absolute; width: 688px; height: 58px; z-index: 1; left: 12px; top: 19px" id="couche4">
		<p align="center">bonjour a vous faire par de 
	 </p>
		<p align="center"><font size="4">e  
	</font></div>
	<img border="0" src="images/pagewebfulltuto1_07.gif" width="716" height="398"></div>
	<body background="images/fond.gif">
 
<div style="position: absolute; width: 100px; height: 450px; z-index: 3; left: 19px; top: 146px" id="couche3">
	<img border="0" src="images/pagewebfulltuto1_04.gif" width="100" height="396">
	<dl id="menu" style="position: absolute; left: -1px; top: 10px">
	<div id="menu1" style="position: absolute; left: 25px; top: 112px; width:58px">
		<dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();" style="position: absolute; left: 60px; margin-top: -18px">
				<ul>
					<ul><li><a href="#">Sous-Menu 1.1</a></li></ul>
 
					<ul><li><a href="#">Sous-Menu 1.3</a></li></ul>
				</ul></li>
			</dd>
			</div>	
 
 
</body>
 
</html>

et le code css

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
110
<style type="text/css">
 html,body {
 
}
 
p,ul,li,td {
font-size : 100%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : black;
 
}
 
h1 {
font-size : 200%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : red;
text-align: center;
}
 
h2 {
font-size : 150%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : red;
padding-left:15px;
 
}
 
a:link {color: black; text-decoration:underline;}
a:visited {color: black; text-decoration:underline;}
a:hover {color:white; text-decoration:none;}
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 6em;
 
}
 
#menu dt {
cursor: pointer;
 
height: 10px;
line-height: 20px;
margin: 2px 0;
 
text-align: center;
font-weight: bold;
}
 
#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
 
background: #A9BFCB;
}
#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
 
}
#menu li a, #menu dt a {
 
text-decoration: none;
display: block;
}
 
#menu li a:hover {
text-decoration: underline;
}
 
#menu1,#menu2,#menu3,#menu4 {
position: absolute;
width: 10em;
z-index: 500;
}
#menu1 {
top:100px;
left: 200px;
}
 
 
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 100px;
left : 10px;
color: #0033CC;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #FFFFFF;
}
#mentions a:hover{text-decoration: underline;
}
-->
</style>