Réaliser menu horizontal déroulant

**Mbete** · 29/05/2016, 06h22

Bonjour,

Je voudrais réaliser un menu horizontal déroulant en html. J'utilise un éditeur de site Web Builder Kit la FAQ est ici http://docs.basekit.com/.
Mon problème est qu'il s'affiche encore en verticale, j'aimerais l'avoir à l'horizontal. Voilà le code rattacher à mon menu :

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
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
{# app/Resources/views/layout.twig #}
<!-- CSS asset -->
<link href="{{asset('/css/menu1.css')}}" rel="stylesheet">
<ul id="menu">
	<li>
	<a href="#">accueil</a>
	</li>
	<li>
	<a href="#">membres</a>
	<ul>
		<li><a href="#">connexion</a></li>
		<li><a href="#">inscription</a></li>
	</ul>
	</li>
	<li>
	<a href="#">images</a>
	<ul>
		<li>
		<a href="#">photos</a>
		<ul>
			<li><a href="#">catégorie 1</a></li>
			<li><a href="#">catégorie 2</a></li>
		</ul>
		</li>
		<li>
		<a href="#">vidéos</a>
		</li>
	</ul>
	</li>
	<li>
	<a href="#">téléchargements</a>
	<ul>
		<li><a href="#">vidéos</a></li>
		<li><a href="#">musiques</a></li>
	</ul>
	</li>
	<li>
	<a href="#">plus</a>
	<ul>
		<li><a href="#">forum</a></li>
		<li><a href="#">liens</a></li>
		<li><a href="#">nous contacter</a></li>
		<li><a href="#">team</a></li>
		<li><a href="#">recherche</a></li>
	</ul>
	</li>
</ul>

Pour le css voilà :

Code css :

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
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}
 
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px; /* largeur */
}
 
#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
 
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}
 
 
#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}
 
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

J'espère que vous pourrez m'aider et dites moi aussi comment copier le code avec les couleurs.

**NoSmoking** · 29/05/2016, 11h16

Bonjour,
pour que tes « sous-menus » apparaissent au survol du menu principal il te manque une prise en compte via un :hover sur les <li> de premier et second niveau.

Cela se traduit en CSS par :

Code :

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

1
2
3
4
#menu >li:hover >ul,     /* ouverture 1st niveau */
#menu >li li:hover >ul{  /* ouverture 2nd niveau */
  left:auto;             /* rend visible les sous-menus */
}

à ajouter donc à ton CSS.

Invité · 29/05/2016, 12h19

Bonjour,

ou plus simplement, quel que soit le niveau :

Code :

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

1
2
3
#menu li:hover > ul {  /* ouverture sous-niveau */
  left:auto;             /* rend visible les sous-menus */
}

**Mbete** · 29/05/2016, 12h56

Je veux bien vous croire mais mon problème c'est que je n'arrive pas à lier ma feuille de style à ma page web pour que le style prenne forme.

**NoSmoking** · 29/05/2016, 19h27

Ah ! voilà donc le pourquoi

Mon problème est qu'il s'affiche encore en verticale,...

que j'ai eu du mal à comprendre

.

je n'arrive pas à lier ma feuille de style à ma page web...

vérifie dans ce cas le chemin d'accès à ton fichier CSS

**Mbete** · 30/05/2016, 17h26

J'ai réussi avec un peu d'aide

!!

**NoSmoking** · 30/05/2016, 19h52

Quel était donc le problème ?

**Mbete** · 30/05/2016, 20h38

J'ai eu l'aide de mon hébergeur qui m'a dit que mon code était superflu.

voilà comment il se présente finalement. J'ai tout entrer dans la partie code HTML,
ça donne ça :

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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<style type="text/css">
  #menu, #menu ul /* Liste */
  {
    padding : 0;
    /* pas de marge intérieure */
    margin : 0;
    /* ni extérieure */
    list-style : none;
    /* on supprime le style par défaut de la liste */
    line-height : 21px;
    /* on définit une hauteur pour chaque élément */
    text-align : center;
    /* on centre le texte qui se trouve dans la
    liste */
  }
  #menu /* Ensemble du menu */
  {
    font-weight : bold;
    /* on met le texte en gras */
    font-family : Arial;
    /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px;
    /* hauteur du texte : 12 pixels */
  }
  #menu a /* Contenu des listes */
  {
    display : block;
    /* on change le type d'élément, les liens
    deviennent des balises de type block */
    padding : 0;
    /* aucune marge intérieure */
    background : #000;
    /* couleur de fond */
    color : #fff;
    /* couleur du texte */
    text-decoration : none;
    /* on supprime le style par défaut des
    liens (la plupart du temps = souligné) */
    width : 144px;
    /* largeur */
  }
  #menu li /* Elements des listes */
  {
    float : left;
    /* pour IE qui ne reconnaît pas "transparent" */
    border-right : 1px solid #fff;
    /* on met une bordure blanche à
    droite de chaque élément */
  }
  /* IE ne reconnaissant pas le sélecteur ">" */
  html>body #menu li
  {
    border-right: 1px solid transparent ;
    /* on met une bordure
    transparente à droite de chaque élément */
  }
  #menu li ul /* Sous-listes */
  {
    position: absolute;
    /* Position absolue */
    width: 144px;
    /* Largeur des sous-listes */
    left: -999em;
    /* Hop, on envoie loin du champ de vision */
  }
  #menu li ul li /* Éléments de sous-listes */
  {
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment)
    */
    border-top : 1px solid #fff;
    /* on met une bordure blanche en haut
    de chaque élément d'une sous liste */
  }
  /* IE ne reconnaissant pas le sélecteur ">" */
  html>body #menu li ul li
  {
    border-top : 1px solid transparent;
    /* on met une bordure
    transparente en haut de chaque élément */
  }
  #menu li ul ul
  {
    margin    : -22px 0 0 144px ;
    /* On décale les sous-sous-listes
    pour qu'elles ne soient pas au dessus des sous-listes */
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment)
    */
    border-left     : 1px solid #fff ;
    /* Petite bordure à gauche pour
    ne pas coller ... */
  }
  /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
  html>body #menu li ul ul
  {
    border-left     : 1px solid transparent ;
    /* on met une bordure
    transparente sur la gauche de chaque élément */
  }
  #menu li:hover > ul {
    /* ouverture sous-niveau */
    left:auto;
    /* rend visible les sous-menus */
  }
</style>
<ul id="menu">
	<li>
	<a href="#">
	accueil
	</a>
	</li>
	<li>
	<a href="#">
	membres
	</a>
	<ul>
		<li>
		<a href="#">
		connexion
		</a>
		</li>
		<li>
		<a href="#">
		inscription
		</a>
		</li>
	</ul>
	</li>
	<li>
	<a href="#">
	images
	</a>
	<ul>
		<li>
		<a href="#">
		photos
		</a>
		<ul>
			<li>
			<a href="#">
			catégorie
              1
			</a>
			</li>
			<li>
			<a href="#">
			catégorie
              2
			</a>
			</li>
		</ul>
		</li>
		<li>
		<a href="#">
		vidéos
		</a>
		</li>
	</ul>
	</li>
	<li>
	<a href="#">
	téléchargements
	</a>
	<ul>
		<li>
		<a href="#">
		vidéos
		</a>
		</li>
		<li>
		<a href="#">
		musiques
		</a>
		</li>
	</ul>
	</li>
	<li>
	<a href="#">
	plus
	</a>
	<ul>
		<li>
		<a href="#">
		forum
		</a>
		</li>
		<li>
		<a href="#">
		liens
		</a>
		</li>
		<li>
		<a href="#">
		nous contacter
		</a>
		</li>
		<li>
		<a href="#">
		team
		</a>
		</li>
		<li>
		<a href="#">
		recherche
		</a>
		</li>
	</ul>
	</li>
</ul>

Réaliser menu horizontal déroulant

CSS

Discussions similaires

Partager

Partager