Menu déroulant css

Version imprimable

Menu déroulant css

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:

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:

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;
	}

Salut,

T'as déjà un souci d'imbrication dans tes <ul><li>.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="menu_h">
	<ul>
		<li> Le Vin en Italie
			<ul> 
				<li><a href="#" > La Toscane</a>
					<ul>
						<li><a href="#" > Montepulciano</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

Citation:

Envoyé par Torgar

Salut,

T'as déjà un souci d'imbrication dans tes <ul><li>.

C'est bien ce que je dis. Il y a de quoi perdre les pédales :cry:

_____

Plus sérieusement, voilà mon nouvel html corrigé.
Le problème du css est autrement plus ardu.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div id="menu_h">
			     <ul>
				    <li> Le Vin en Italie
					<ul> 
					      <li><a href="#" > Veneto</a>
						    <ul>
							<li><a href="#" > Valpolicella</a>
			                                     <ul>
								  <li><a href="#" > Amarone della Valpolicella</a></li>
			                                       </ul>
			                                  </li>
			                              </ul>
						</li>	
					   </ul>
					</li>
				</ul>
</div>

19/02/2013, 13h25
rodolphebrd

Bonjour, il y a tellement d'exemples sur le web :
http://red-team-design.developpez.co...eroulant-css3/
http://css.developpez.com/tutoriels/menu-deroulant/
19/02/2013, 14h44
astran

Ça y est j'y suis parvenu. Je pense que je m'étais trop embrouillé pour pouvoir réellement comprendre. Il a suffi de rajouter un margin-left. C'était tout bête :-D

Je sais pas encore trop ce qui cloche pour le léger décalage en haut mais c'est pas désagréable à la vue. Donc je vais peut-être laisser comme ça jusqu'à ce que je maîtrise bien ce css.

Merci encore.