Liste deroulante en html

Bonjour

je veux que dans la liste deroulante je puisse avoir deux sous parties dans par ex :Quuen Mary mais je n'y arrive pas meme en rajoutant une balise <UL> MAIS SA MARCHE PAS
je vous envoi le code html et css pour que vous essayer de comprendre:

Merci

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
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http;//www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml.lang="fr">
<head>
	<title>site des chantiers</title>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
	<link rel="stylesheet" media="screen" type="text/css"  href="chantiers.css" />
	<script type="text/javascript">
        <!--
        sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
        }
        -->
        </script>
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
</head>
 
<body bgcolor=black>
 
<div id="en_tete">
	<h1>Les chantiers de l'Atlantique</h1>
</div>
<div id="menus">
 
	<ul id="menu">
		<li><a href="file:///J:/projet%20chantier/projet%20web/web2/actu.htm">Atualités</a></li>
		<li><a href="">Historique</a>
			<ul>
				<li><a href="file:///F:/projet%20chantier/projet%20web/Untitled-2.htm">photos</a></li>
			</ul>
		</li>
		<li>
		<a href="file:///I:/projet%20chantier/projet%20web/web2/Untitled-2.htm">Concepetion d'un bateau</a>
			<ul>
				<li><a href="file:///I:/projet%20chantier/projet%20web/web2/Untitled-2.htm">photos</a></li>
			</ul>
		</li>
		<li>
			<a href="">Les différents bateaux construits</a>
 
			<ul>
				<li><a href="file:///F:/projet%20chantier/projet%20web/Untitled-2.htm">photos</a></li>
			</ul>
		</li>
		<li><a href="file:///J:/projet%20chantier/projet%20web/web2/Untitled-2.htm">Queen Mary</a>
			<ul>
				<li><a href="file:///J:/projet%20chantier/projet%20web/web2/photoqueen.htm">photos et video</a></li>
			</ul>
		</li>
	<li><a href="">Plan</a></li>
	<li><a href="">Visite</a></li>
 
	</ul>
 
</div>
<div id="corps">
</div>
</body>
</html>

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
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
body
{
	background:url("zvbxjg95.gif") no repeat;
	font-family:Arial;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
li
{
	color:#F7E444;
}
a
{
	color:blue;	
}
a:hover
{
	color:red;
}
h1
{
	color:#0099FF;
	font-size:24px;
	text-align:center;
	padding-top:25px;
}
 
 
/*-----------------------définition stle des blocs----------------*/
/*--------------------style div en-tête------------------*/
 
#en_tete
{
    font-family:lucida handwriting;
    background-image:url("juju.bmp");
	height:150px;
	z-index:1;
 
}
 
/*---------------------------style menus----------------------*/
 
#menus
{
	width:20%;
	float:left;
	margin-left:-5px;
	margin-top:50px;	
}
 
 
/*----------------------style corps--------------------------------*/
#corps
{
	margin-left:22.5%;
	margin-top:50px;
	padding:20px;
	color:black;
	background-image:url("chnaties.jpg");
	background-repeat:no-repeat;
	height:500px;
}
 
 
/*----------------style pied de page-----------------------*/
 
#menu, #menu ul /* Liste */     
{
        padding : 0; 
        margin : 0; 
        list-style : none; 
        line-height : 30px; 
        text-align : center; 
}
 
#menu /* Ensemble du menu */
{
        font-weight : bold; 
        font-family : Arial;
        font-size : 12px; 
}
 
#menu a /* Contenu des listes */
{
        display : block; 
        padding : 0; 
        background : #000;       
        color : #fff; 
        text-decoration : none; 
        width : 144px; 
}
 
#menu li /* Elements des listes */      
{ 
        float : left;
        border-right : 1px solid #fff; 
}
 
html>body #menu li
{
        border-right: 1px solid transparent ; 
}
 
#menu li ul /* Sous-listes */
{ 
        position: absolute; 
        width: 144px; 
        left: -999em; 
}
 
 
#menu li ul li /* Éléments de sous-listes */
{
        border-top : 1px solid #fff; 
		position: absolute;
        top: -30px;
        left: 144px; 
}
 
html>body #menu li ul li                
{
        border-top : 1px solid transparent;
}
 
#menu li ul ul 
{
 
        border-left     : 1px solid #fff ;    
}
 
 
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; 
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; 
        background: #fff; 
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: 2; 
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; 
        min-height: 5; 
}