problème menu horizontal déroulant

**Nibiru** · 16/04/2012, 10h10

Bonjour à tous,

Débutant dans le html et CSS, j'ai décidé de créer un menu horizontal avec un hover dans le but d'obtenir un rendu d'onglet comme celui de pixmania ou cdiscount (je trouve ça joli).

Cependant je bloque ^^ malgrè plusieurs tentatives pour obtenir ce que je veux. Le contenu de mes sous onglets (ex :TV, homecinéma, et son) est bien en aligné mais leur contenu respectif est également aligné or je voudrai que le contenu de ses sous menus apparaisse en dessous de leur dossier parent.
De plus j'ai un décalage sur la droite et un text-align ne fait rien^^
Je ne sais pas s'il fallait que je poste dans la section html ou CSS mais comme le problème vient du CSS je poste içi

Voici mon code html 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
.menu {
	list-style-type:none;
	width:1300px;
	height:30px;
	background-color:yellow;
		}
 
.menu li {
	display:inline-block;
	font-size:15px;
	padding: 10px 10px 10px 10px;
		}
 
.menu ul {
	display:none;
	position:absolute;
	padding: 10px 10px 10px 10px;
	width:500px;
	height:300px;
		}
 
.menu li:hover ul {
	display:block;
                }

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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
	<nav>
	<ul class="menu">
	<li><a href="">Image et Son</a>
		<ul>
		<li><a href="">TV</a>
			<ul>
			<li><a href="">Ecran LCD</a></li>
			<li><a href="">Ecran plasma</a></li>
			<li><a href="">Ecran LED</a></li>
			<li><a href="">Ecran 3D</a></li>
			</ul>
		</li>
		<li><a href="">Home cinéma</a>
			<ul>
			<li><a href="">Ensemble BLU RAY</a></li>
			<li><a href="">Ensemble DVD</a></li>
			<li><a href="">Vidéo-projecteur</a></li>
			<li><a href="">Vidéo-projecteur 3D</a></li>
			<li><a href="">Lecteur DVD</a></li>
			<li><a href="">Lecteur BLU RAY</a></li>
			</ul>
		</li>			
		<li><a href="">Son</a>
			<ul>
			<li><a href="">Chaine-hi-fi</a></li>
				<ul>
			<li><a href="">Chaine-hifi USB</a></li>
			<li><a href="">Station d'accueil</a></li>
			<li><a href="">Mini chaine-hifi</a></li>
				</ul>
			<li><a href="">Lecteur MP3</a></li>
			<li><a href="">Lecteur MP4</a></li>
			<li><a href="">Ipod</a></li>
				<ul>
			<li><a href="">Ipod Shuffle</a></li>
			<li><a href="">Ipod Nano</a></li>
			<li><a href="">Ipod Touch</a></li>
			<li><a href="">Ipod Classic</a></li>
				</ul>
			</ul>
		</li>
 
		<!-- INCORPORER UN LI POUR LA PUB -->
		</ul>
	</li>		
 
	<li><a href="">Photos et caméscope</a>
		<ul>
		<li><a href="">Photo</a>
			<ul>
			<li><a href="">Numérique</a></li>
			<li><a href="">Bridge</a></li>
			<li><a href="">Hybride</a></li>
			<li><a href="">Reflex numérique</a></li>
			</ul>
		</li>
		<li><a href="">Caméscope</a>
			<ul>
			<li><a href="">Numérique</a></li>
			<li><a href="">De poche</a></li>
			<li><a href="">Etanche</a></li>
			</ul>
		</li>
			<!-- INCORPORER UN LI POUR LA PUB -->
		</ul>
	</li>
	<li><a href="">Informatique</a>
		<ul>
		<li><a href="">Ordinateur</a>
			<ul>
			<li><a href="">Bureau</a></li>
			<li><a href="">Portable</a></li>
			<li><a href="">Netbook</a></li>
			<li><a href="">Apple</a></li>
			</ul>
		</li>
		<li><a href="">Tablette tactile et E-book </a>
			<ul>
			<li><a href="">tablette</a></li>
			<li><a href="">Ipad</a></li>
			<li><a href="">E-book</a></li>
			</ul>
		</li>
		<li><a href="">Imprimantes</a>
			<ul>
			<li><a href="">Jet d'encre</a></li>
			<li><a href="">Jet d'encre multifonction</a></li>
			<li><a href="">Laser</a></li>
			<li><a href="">Laser multifonction</a></li>
			<li><a href="">Imprimante photo</a></li>
			</ul>
		</li>
		<li><a href="">Stockage externe</a>
			<ul>
			<li><a href="">Clé USB</a></li>
			<li><a href="">Disque dur 2.5"</a></li>
			<li><a href="">Disque dur 3.5"</a></li>
			<li><a href="">Disque dur SSD</a></li>
			<li><a href="">Disque dur multimédia</a></li>
			</ul>
		</li>
			<!-- INCORPORER UN LI POUR LA PUB -->
		</ul>
		</li>
	<li><a href="">Electroménager</a>
		<ul>
		<li><a href="">Gros électroménager</a>
			<ul>
			<li><a href="">Lave linge</a>
				<ul>
			<li><a href="">Lave linge frontal</a></li>
			<li><a href="">Lave linge top</a></li>
			<li><a href="">Lave linge+séchage</a></li>
				</ul>
			</li>
			<li><a href="">Sèche linge</a>
				<ul>
			<li><a href="">Sèche linge frontal</a></li>
			<li><a href="">Sèche linge top</a></li>
				</ul>
			</li>
			<li><a href="">Lave vaisselle</a>
				<ul>
			<li><a href="">Lave vaisselle posable</a></li>
			<li><a href="">Lave vaisselle intégrable</a></li>
				</ul>
			</li>
			<li><a href="">Réfrigérateur</a></li>
			<li><a href="">Réfrigérateur Américain</a></li>
			</ul>
		</li>
		<li><a href="">Petit électroménager</a>
			<ul>
			<li><a href="">Aspirateur</a>
				<ul>
			<li><a href="">Aspirateur avec sac</a></li>
			<li><a href="">Aspirateur sans sac</a></li>
			<li><a href="">Aspirateur Robot</a></li>
				</ul>
			</li>
			<li><a href="">Repassage</a>
				<ul>
			<li><a href="">Fer à repasser</a></li>
			<li><a href="">Centrale vapeur</a></li>
			<li><a href="">Station de repassage	</a></li>
				</ul>
			</li>
			<li><a href="">Nettoyeur vapeur</a></li>
			</ul>
		</li>
		<li><a href="">Electro Cuisine</a>
			<ul>
			<li><a href="">Machine à café</a>
				<ul>
			<li><a href="">Cafetière classique</a></li>
			<li><a href="">Cafetière à dosette/capsule</a></li>
			<li><a href="">Moulin à café</a></li>
			<li><a href="">Cafetière multifonction</a></li>
				</ul>
			</li>
			<li><a href="">Bouilloire/théière/chocolatière</a></li>
			<li><a href="">grille-pain</a></li>
			<li><a href="">Machine à pain</a></li>
			<li><a href="">Micro-onde</a>
				<ul>
			<li><a href="">Micro onde mono-fonction</a></li>
			<li><a href="">Micro onde grill</a></li>
			<li><a href="">Micro onde combiné</a></li>
				</ul>
			</li>
			<li><a href="">Cuisine à la vapeur</a>
				<ul>
			<li><a href="">Cuiseur-vapeur</a></li>
			<li><a href="">Mijoteur-wok</a></li>
			<li><a href="">Auto-cuiseur</a></li>
				</ul>
			</li>
			</ul>
		</li>
			<!-- INCORPORER UN LI POUR LA PUB -->
		</ul>
	</li>
	</ul>
</nav>

Si vous pouviez me dire comment régler mon soucis et m'indiquer la voie

merci bcp

**elfamine** · 16/04/2012, 18h39

Ce genre de menu est connu sous le nom de mega menu il me semble que l'idée général est de mettre les sous menu dans dans des div

edit : un peu plus de détail au sujet de ce menu

donc les sous menu sont seront des div qu'on découpe en colonnes. On va appliquer le principe du 960 Grid System ce qui donne en gros

en html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav>
<ul id="menu">  
 <li>
  <a href="#" class="dropmenu">Image et Son</a>
   <div class="submenu sub_3col"></div>
 </li>  
<li>
 <a href="#" class="dropmenu">Photos et caméscope</a>
  <div class="submenu sub_2col">  </div>
</li> 
<li><a href="#">Informatique</a></li>  
<li><a href="#">Electroménager</a></li>  
</ul>
</nav>

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
#menu{  
list-style:none;  
width:940px; height:30px; 
margin:0; padding:5px;
background-color:yellow;}
 
#menu  li{  
float:left;  
display:block;  
position:relative;  
margin:0; padding: 10px;  
border:none;}
 
#menu li:hover{   
background-color:grey;}
#menu li a {  
display:block; 
text-decoration:none;}

dans cette exemple Image et Son et Photos et caméscope vont avoir des sous menu ;c'est pour ca qu'ils sont de la class dropmenu et à l’intérieur on met donc nos div.

tu remarquera qu'elles ont deux classes:
submenu

Code :

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

1
2
3
4
5
6
7
.submenu{  
position:absolute;  
left:-999em;  /* pour cacher le sous  menu */  
text-align:left;  
background-color:grey;}
#menu li:hover .submenu {  
left:0px;top:auto; /* pour afficher le sous menu */  }

sub_#col

Code :

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

1
2
3
4
.sub_1col {width: 140px;}  
.sub_2col{width: 280px;}
.sub_3col{width: 420px;}
.sub_4col{width: 560px;}

si on prend Image et Son c'est un menu dont le sous menu est une div submenu dont le nombre de colonnes est 4 donc qui prendra la class sub_4col

si on veut avoir un sous menu avec plus de 4 colonnes il suffit d'ajouter une class sub_#col. La notamment si on voulait 5 colonnes

Code :

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

.sub_5col{width: 700px;}

maintenant on va ajouter des éléments dans notre sous menu

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
div class="submenu sub_3col">
 <div class="col1">
  <a href="#">TV</a>
   <ul>
    <li><a href="#">Ecran LCD</a></li>
    <li><a href="#">Ecran plasma</a></li>
    <li><a href="#">Ecran LED</a></li>
    <li><a href="#">Ecran 3D</a></li>
   </ul>
 </div>
 <div class="col1">
  <a href="#">Home cinéma</a>
   <ul>
    <li><a href="#">Ensemble BLU RAY</a></li>
    <li><a href="#">Ensemble DVD</a></li>
    <li><a href="#">Vidéo-projecteur</a></li>
    <li><a href="#">Vidéo-projecteur 3D</a></li>
    <li><a href="#">Lecteur DVD</a></li>
    <li><a href="#">Lecteur BLU RAY</a></li>
   </ul>
 </div>
 <div class="col1">
  <a href="#">Son</a>
   <ul>
    <li><a href="#">Chaine-hi-fi</a></li>
    <li><a href="#">Chaine-hifi USB</a></li>
    <li><a href="#">Station d accueil</a></li>
    <li><a href="#">Mini chaine-hifi</a></li>
    <li><a href="#">Lecteur MP3</a></li>
    <li><a href="#">Lecteur MP4</a></li>
   </ul>
 </div>
 <div class="col3">
  <p>Zone Pub </p>
 </div>
</div>

chaque élément va etre mis dans une div dont la classe va dépendre du nombre de colonnes qu'on souhaite.

dans cette exemple TV, Home cinéma et Son vont prendre une colonne sur 3 alors la pub va prendre 3 sur 3.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.col1,
.col2,
.col3,
.col4{
display:inline;  
float: left;  
position: relative;  
margin-left: 5px;  
margin-right: 5px;}
 
.col1{width: 130px;}  
.col2{width: 270px;}
.col3{width: 410px;}
.col4{width: 550px;}

on remarque que col1 est 130px alors que sub_1col est à 140px ; c'est normal, les col ont une marge de 10px sur les cotés ( 5px sur la gauche et 5px sur la droite)

et pour finir le détails des li en sous menu

Code :

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

1
2
3
.submenu ul,
.submenu ul li{
margin:0 !important; padding:0 !important;}

normalement ca devrait donner quelque chose dans ce genre :

J'ai mis en piece jointe le fichier html le css qui va avec.

il ne reste plus qu'à styler le tout

**Nibiru** · 16/04/2012, 20h12

plop,

merci de ta réponse mais du coup je me pose la question suivante:

En mettant mes sous-menus dans un ou plusieurs DIV ils seront toujours affectés par mes . menu.. { } ou le faite de le mettre dans un div permettra de lui donner une priorité au .menu?

**elfamine** · 17/04/2012, 18h31

J'ai édité ma réponse prétendante. J’espère que ca t'aidera à réaliser ton menu.

problème menu horizontal déroulant

CSS

Vue hybride

Discussions similaires

Partager

Partager