Discussion :

[astran]

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

[Torgar]

Salut,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[astran]

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

_____

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

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

[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/

[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.