Menu déroulant apparent devant bannière
Bonjour.
Je sollicite une nouvelle fois votre aide car je dois réaliser mon site (je le fais avec HTML CSS + Bootstrap).
Je comptais finir ma mise en page avec un menu déroulant à l'intérieur du menu ... Simple jusque-là mais ledit menu déroulant vient à se cacher derrière l'image/bannière d'en dessous.
J'aimerais aussi que les élements du menu principal soient alignés sur la même ligne (actuellement, sur deux lignes).
Pour le menu déroulant, j'ai utilisé le z-index et un position : relative ... sans succès !
Des idées pour conclure ce projet de site et finaliser les derniers détails ?
Merci d'avance.
HTML :
Code:
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="menu">
<ul>
<li><a href="Accueil.html" class="logoAccueil">Accueil</a></li>
<li><a href="Présentation.html">Ma présentation</a></li>
<li><a href="Apprentissages.html">Mes apprentissages</a></li>
<li><a href="Compétences.html">Mes compétences</a></li>
<li class="deroulant"><a href="Créations.html">Mes créations</a>
<ul class="sous">
<li><a href="Projets Personnels.html">Projets personnels</a></li>
<li><a href="Projets Scolaires.html">Projets scolaires</a></li>
</ul>
</li>
<li class="deroulant"><a href="Veille technologique.html">Ma veille technologique</a>
<ul class="sous">
<li><a href="La Cybersécurité, kézako.html">La cybersécurité, kézako ?</a></li>
<li><a href="Problématiques.html">Problématiques</a></li>
<li><a href="Contexte.html">Contexte</a></li>
<li><a href="Solutions.html">Solutions</a></li>
<li><a href="Conclusions.html">Conclusions</a></li>
<li><a href="Sources.html">Sources</a></li>
</ul>
</li>
<li><a href="Contact.html" class="logoContact">Contact</a></li>
</ul>
</nav>
<!--DEBUT BANNIERE-->
<div class="container-fluid banner">
<div class="ban">
<img src="img/dev.jpg" alt="bannière du site" class="img">
</div>
<div class="inner-banner">
<h1>Bienvenue sur mon portfolio</h1>
</div>
</div>
<!--FIN BANNIERE-->
</body>
</html> |
CSS :
Code:
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
| @charset "utf-8";
/* font-family: 'Ubuntu', sans-serif; */
body, html
{
padding: 0;
margin: 0;
}
body{
font-family: "Tangerine";
src : url("font/Tangerine-Regular.ttf") format("ttf");
}
/* 1 - LE MENU PRINCIPAL */
.menu{
width: 100%;
margin: 0 auto;
background-color: red;
position: sticky;
top: 0px;
}
.menu ul{
list-style-type: none;
}
.menu ul li{
float: left;
width: 25%;
text-align: center;
position: relative;
z-index: 1000;
}
.menu ul::after{
content: "";
display: table;
clear: both;
}
.menu a{
display: block;
text-decoration: none;
color: black;
border-bottom: 2px solid transparent;
padding: 10px 0px;
color : #EFF6F2;
margin-right: 20px ;
}
.menu a:hover{
color: orange;
border-bottom: 2px solid gold;
}
.logoAccueil
{
color : #E0605A;
font-weight: bold;
text-transform : uppercase;
letter-spacing : 1px;
float: left;
}
.logoContact
{
color : #E0605A;
font-weight: bold;
text-transform : uppercase;
letter-spacing : 1px;
float: left;
}
/* 2 - LE MENU DEROULANT */
.sous{
display: none;
box-shadow: 0px 1px 2px #CCC;
background-image: url("img/dev.jpg");
background-repeat: no-repeat;
position: absolute;
width: 100%;
z-index: 1000;
}
nav > ul li:hover .sous{
display: block;
}
.sous li{
float: none;
width: 100%;
text-align: left;
}
.sous a{
padding: 10px;
border-bottom: none;
}
.sous a:hover{
border-bottom: none;
background-color: RGBa(200,200,200,0.1);
}
.deroulant > a::after{
content:" ▼";
font-size: 12px;
}
/* 3 - LA BANNIERE */
.banner
{
width: 100%;
max-width: 100%;
}
.ban
{
width: 100%;
max-width: 100%;
position: absolute;
}
.ban img
{
width : 100%;
max-width: 100%;
}
.inner-banner
{
position: absolute;
top: 40%;
width:100%;
text-align: center;
}
.inner-banner h1
{
color: #EFF6F2;
text-shadow: 1px 1px 20px #000000;
} |
