Menu déroulant vertical

**lahot22** · 09/10/2015, 11h36

Bonjour,

je suis nouvelle et j'ai désespérément chercher dans les tutos mais sans jamais réussir à l'adapter à mon code, pourriez-vous m'aider SVP?

Voici un bout de ma page html

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
<html>
<head>
	<link rel="stylesheet" href="style.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="jquery.js"></script>
<title>FA</title>
</head>
<header>
	<div id="header">
		<!--logo-->
	</div>
	<!--menu horizontal-->
	<div>
	<ul class="navigation" role="navigation">
		<li><a href="#">Accueil</a></li>
		<li><a href="#">Le club ↓</a></li>
			<ul id="club">
				<li><a href="#">R&egrave;glement</a></li>
				<li><a href="#">Status</a></li>
				<li><a href="#">Objectifs</a></li>
				<li><a href="#">Instruments optiques</a></li>
				<li><a href="#">Site d'observation</a></li>
			</ul>
		<li><a href="#">&Eacute;v&eacute;nements ↓</a></li>
			<ul id="evenements">
				<li><a href="#">Agenda</a></li>
				<li><a href="#">Articles (blog)</a></li>
			</ul>
		<li><a href="#">Galerie d'images</a></li>
		<li><a href="#">Pr&eacute;-Inscription</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	</div>
</header>
/*suite du code*/
</html>

et un bout de mon 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
51
52
53
 
header{
	position:relative;
	height:200px;
	width:100%;
	background:-moz-linear-gradient(to top , rgb(0, 0, 0) , rgb(50, 51, 58));
	background:linear-gradient(to top , rgb(0, 0, 0) , rgb(50, 51, 58));
	background:-o-linear-gradient(to top , rgb(0, 0, 0) , rgb(50, 51, 58));
	background:-webkit-linear-gradient(to top , rgb(0, 0, 0) , rgb(50, 51, 58));
	z-index:2;
}
#header{
	position:absolute;
}
 
/*menu horizontal*/
ul ul{
	display:none;
}
 
.navigation {
position:absolute;
list-style: none;
left:0px;
right:0px;
top:200px;
border:3px solid grey;
padding: 0;
margin: 0;
background:-moz-linear-gradient(to top , rgb(0, 0, 0) , rgb(50, 51, 58));
background:linear-gradient(to top , rgb(0, 0, 0) , rgb(50, 51, 58));
display: flex;
flex-flow: row wrap;
justify-content: center;
}
@media (max-width: 800px) {/*lorsque la taille de l'écran est en dessous de 800px justifier le menu au centre"*/
.navigation {
justify-content: center;
}
}
@media (max-width: 450px) {/*lorsque la taille de l'écran est en dessous de 450px justifier le menu en colonne"*/
.navigation {
flex-flow: column wrap;
}
}
.navigation a {
display: block;
padding: 1em;
text-decoration: none;
text-align: center;
color:white;
}
/*suite de code*/

Je cherche à afficher la liste du menu "Le club" ou "Evenements" lorsque je hover sur ces li.
Bref, techniquement, quand je hover sur "Evenements" il me déroule sa liste où se trouve Agenda et Articles ET DE MËME POUR LE CLUB.

Merci pour votre aide ^^*

Invité · 09/10/2015, 15h20

Bonjour,

tu as un problème d'imbrication des balises.

Code html :

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

1
2
3
4
      <li><a href="#">Le club ↓</a></li>
            <ul id="club">
........
            </ul>

Ce <ul> "enfant" (sous-menu) doit être à l'intérieur du <li> "parent" :

Code html :

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

1
2
3
4
5
      <li><a href="#">Le club ↓</a>
            <ul id="club">
........
            </ul>
      </li>

Puis, un truc du genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/*sous-menus*/
ul > li { position:relative; }
ul > li > ul{
	display:none;
  position:absolute; 
  top:100%;
  background:rgba(0, 0, 0, 0.8);
  border:4px solid #666;
  border-top:0 solid transparent;
}
ul > li:hover > ul{
	display:block;
}

**lahot22** · 10/10/2015, 10h06

Top ça fonctionne

merci jreaux62 1000 merci

Menu déroulant vertical

CSS

Discussions similaires

Partager

Partager