Bonjour, Je commence juste à découvrir css et je butte déjà sur un problème que je n'arrive pas à résoudre.

J'essaie de créer un menu déroulant avec des sous menus uniquement avec html et css. J'arrive jusqu'à présent à faire dérouler les menus horizontaux mais les sous-menus me se décalent pas sous la droites comme ils devraient.

J'ai beau parcourir tous les tutoriaux que je trouve sur le web, j'ai impression d'être encore plus confus après.

Aussi, les éléments du menu sont bien collés entre eux comme je le veux mais à la base il empiète un peu sur le bouton du haut.

Auriez-vous des conseils.

Merci d'avance.

Mon html est du genre :
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
<div id="menu_h">
	<ul>
		<li> Le Vin en Italie
			<ul> 
				<li><a href="#" > Veneto</a></li>
					<ul>
						<li><a href="#" > Valpolicella</a></li>
                                                        <ul>
						                 <li><a href="#" > Amarone della Valpolicella</a></li>
                                                       </ul>
						</li>	
					</ul>
				</li>
			</ul>
                </li>
	</ul>
</div>

le 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
 
#menu_h{
	border: solid black 1px;
	background-color: gray;
	width: 1000px;
	height: 100px;
	position: absolute;
	margin-left: 122px;
	margin-right: auto;
	margin-top: 115px;
	z-index: 3;
		}
 
ul{
	margin-left: 0px;
	padding: 0px;
	list-style: none;
	height: 30px;
	}
 
#menu_h li{
	padding: 0px;
	margin: 0px 0px 0px 10px;
	background-color: brown;
	width: 200px;
	height: 30px;
	border-radius: 10px;
	border: solid #391D00 1px;
	padding-top: 5px;
	float:left;
	display: block;
	text-align: center;
	color: white;
	}
 
#menu_h li:hover{
	background-color: yellow;
	}
#menu_h li li{
	clear: left;
	margin: 0px;
	 }
 
#menu_h ul ul li{
	display: none;
	}
 
#menu_h ul ul:hover > li {
	display: block;
	}