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è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="#">Évé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é-Inscription</a></li> <li><a href="#">Contact</a></li> </ul> </div> </header> /*suite du code*/ </html>
et un bout de mon css:
Je cherche à afficher la liste du menu "Le club" ou "Evenements" lorsque je hover sur ces li.
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*/
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 ^^*
Partager