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
| body{
font-family : 'Source code pro', Calibri, serif;
margin: 0px;
padding : 0px;
}
/*On étire notre élément nav afin que notre navigation
*prenne tout l'espace disponible*/
nav{
width: 100%;
background-color:green;
}
/*On utilise ">" pour ne cibler que la liste ul qui
*est un enfant direct de nav*/
nav > ul{
margin: 0px;
padding : 0px;
}
nav > ul::after{
content: "";
display: block;
clear : both;
}
/*On affiche seulement les éléments li correspondant à
*nos onglets de menu en ligne (côte à côte*/
nav > ul > li{
float: left;
position: relative;
}
/*On enlève les puces devant tous les éléments li
*appartenant à notre éléments nav*/
nav li{
list-style-type : none;
}
/*enlever le trait de soulignement et changer le display *
de tous les liens du menu(onglets et sous-onglets)*/
nav a{
display: inline-block;
text-decoration: none;
color: red;
}
/*Taille des onglets. Ne s'applique qu'au lien des onglets*/
nav > ul > li > a{
padding :15px 140px;
color :yellow;
border-right : 2px solid yellow;
}
/*On cache les sous onglets de notre menu*/
nav .sousmenu{
padding : 50px 20px;
display:none;
}
/*Affichage des sous onglets lors du survol
*de la souris et positionnement des sous menus*/
nav li:hover .sousmenu{
display:inline-block;
position: absolute;
top: 100%;
left: 0px;
padding: 0px;
z-index: 1000;
}
.sousmenu li{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 200px;
border-top: 1px solid yellow;
border-right: 1px solid blue;
}
.sousmenu li a{
padding: 15px 30px;
font-size : 13px;
color:blue;
width: 270px;
}
.menu-html:hover{
border-top : 5px solid #e44d26;/*rouge brique*/
background-color: RGBa(228,77,38, 0.15);/*violet*/
}
.menu-css:hover{
border-top : 5px solid #0070bb;
background-color: RGBa(000,112,192, 0.15);
}
.menu-js:hover{
border-top : 5px solid #f1dc4f;/*jaune*/
background-color: RGBa(241,220,79, 0.15);/*gris souris*/
}
.menu-contact:hover{
border-top : 5px solid #bbb;
background-color: RGBa(220,220,220, 0.15);
}
.sousmenu li:hover a{
color:#EEE;/*gris clair*/
font-weight: bold;
}
menu-html .sousmenu li:hover{
background-color: RGB(210,77,60,);/*rouge brique*/
}
menu-css .sousmenu li:hover{
background-color: RGB(000,115,200,);/*blue*/
}
menu-js .sousmenu li:hover{
background-color: RGB(200,165,75,);/*caca d'oie*/
} |
Affichage Menu déroulant
Répondre avec citation
!
Partager