A voir également:
- Problème menu déroulant trois niveau
- Menu déroulant plusieurs niveaux html ✓ - Forum - CSS
- Excel liste déroulante en cascade 3 niveaux ✓ - Forum - Excel
- Listes déroulantes de cellule (en cascade) - Conseils pratiques - Excel
- Listes déroulantes dépendantes à trois niveaux dont 1 fixe ✓ - Forum - Excel
- Niveau empilement images et menu déroulant ✓ - Forum - Webmaster
2 réponses
devGnode
- Messages postés
- 6
- Date d'inscription
- samedi 13 février 2021
- Statut
- Membre
- Dernière intervention
- 16 février 2021
<HTML>
<HEAD>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Idylle bourgeoise</title>
<script src="https://kit.fontawesome.com/5c79d10849.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap" rel="stylesheet">
<style>
.header {
background-color : white;
width: 100%;
margin: 0 auto;
position: flex;
top: 0px;
display: flex;
align-items: flex-start;
justify-content: space-between;
font-family: 'Arial', serif;
}
aside {
float : right;
color : black;
background-color : #7EF2E7;
opacity : 0.8;
border-radius: 10px;
margin-right: 10%;
margin-top : 20px;
margin-left : 10%;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
}
.site-description {
text-align: center;
}
nav{
width: 104%;
margin-left: -49px ;
margin-right: -100px ;
background-color: #44A6A6;
position: sticky;
top: 0px;
}
nav ul{
list-style-type: none;
padding-left: 30px;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 0px;
}
nav ul li{
float: left;
width: 14.2%;
text-align: center;
position: relative;
margin : auto;
}
nav ul::after{
content: "";
display: table;
clear: both;
}
nav a{
display: block;
text-decoration: none;
color: black;
border-bottom: 2px solid transparent;
padding: 10px 0px;
color : white;
font-family: 'Arial', serif;
}
/*fait apparaitre un block de couleur quand on passe sur un élément*/
nav a:hover{
color: black;
background-color: #7EF2E7;
border-bottom: 2px solid black;
}
.sous{
display : none; /*masque les sous éléments*/
box-shadow: 0px 1px 2px #CCC; /*met le cadre des sous éléments en reliefs*/
background-color: white;/*definit la couleur */
position: absolute;
width: 100%;
z-index: 1000;
}
nav > ul li:hover .sous{
display: block; /*fait apparaitre les éléments de sous*/
}
.sous li{
float: none;
width: 100%;
text-align: left;
border-top : thin dotted black;
}
.sous a{
padding: 10px;
border-bottom: none;
color : black;
}
.sous a:hover{
border-bottom: none;
background-color: RGBa(200,200,200,0.1);
}
.deroulant > a::after{
content:"▼";
font-size: 12px;
}
.conteneur{
margin: 50px 20px;
height: 1500px;
}
article{
float : right;
color : white;
background-color : black;
opacity : 0.8;
border-radius: 10px;
margin-right: 10%;
margin-top : 30px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
.search-container {
margin-top : 10px;
}
.sous-sous{
display : none; /*masque les sous éléments*/
box-shadow: 0px 1px 2px #CCC; /*met le cadre des sous éléments en reliefs*/
background-color: white;/*definit la couleur */
position: absolute;
width: 100%;
z-index: 1000;
}
nav > ul li:hover .sous-sous{
display: block; /*fait apparaitre les éléments de sous*/
}
.sous-sous li{
float: none;
width: 100%;
text-align: left;
border-top : thin dotted black;
}
.sous-sous a{
padding: 10px;
border-bottom: none;
color : black;
}
.sous-sous a:hover{
border-bottom: none;
background-color: RGBa(200,200,200,0.1);
}
</style>
</HEAD>
<BODY>
<div class="header">
<a href=""><img src="../Accueil/logo.jpg" height="105px" width="245px"></a>
<aside><p class="site-description">Bienvenue sur le site de valorisation d'une collection de photographies issues du fonds Joseph Mauran,photographe amateur et bourgeois rural de la Belle Epoque.</p></aside>
<article>Espace</br>enseignant</article>
</div>
<div class="menu">
<ul>
<nav>
<ul>
<li ><a href="#"><i class="fas fa-home"></i> Accueil </a>
<li ><a href="#">Joseph Mauran </a>
</li>
<li class="deroulant"><a href="#">Decouvrir la Belle Epoque </a>
<ul class="sous">
<li class="deroulant-sous"><a href="#">Evénements Historiques</a></li>
<ul class="sous-sous">
<li><a href="#">Exposition maritime internationale</a></li>
<li><a href="#">Exposition universelle</a></li>
<li><a href="#">Guerre</a></li>
</ul>
<li class="deroulant-sous"><a href="#">Manifestations Sociales</a></li>
<ul class="sous-sous">
</ul>
<li class="deroulant-sous"><a href="#">Innovations Technologiques</br></a></li>
<ul class="sous-sous">
</ul>
<li class="deroulant-sous"><a href="#">Style de vie</a></li>
<ul class="sous-sous">
</ul>
<li class="deroulant-sous"><a href="#">Photomontages</a></li>
<li class="deroulant-sous"><a href="#">Vêtements</a></li>
<ul class="sous-sous">
</ul>
</ul>
</li>
<li><a href="#">Cartes postales</br> </a></li>
<li class="deroulant"><a href="#">Jeux </a>
<ul class="sous">
<li><a href="#">Quizz</a></li>
<li><a href="#">Memory</a></li>
<li><a href="#">Bonus</a></li>
</ul>
</li>
<li class="deroulant"><a href="#">A propos </a>
<ul class="sous">
<li><a href="#">Qui sommes nous</a></li>
<li><a href="#">Mission et projet</a></li>
<li><a href="#">Bibliographie</a></li>
</ul>
</li>
<li>
<div class="search-container">
<form action="#">
<input type="text" placeholder=" Rechercher..." name="search">
<button type="submit"><i class="fas fa-search"style="font-size:16px; padding-top:1px ; padding-bottom: 1px;"></i></button>
</form>
</div>
</li>
</ul>
</nav>
</ul>
</div>
</BODY>
</HTML>
