Pour clarifier les choses, je me fait ici un article spécial menu déroulant à plusieurs niveaux:
-Tout d’abord le code html(une partie):
<nav class= »navigation-principale »>
<ul id= »ul-premier-niveau »>
<li><a href= »# » class= »li-premier-niveau »>Niveau1</a>
<ul class= »ul-deuxieme-niveau »>
<li class= »li-deuxieme-niveau li-deuxieme-menu-b »><a href= »# »>Niveau2</a>
<ul class= »ul-troisieme-niveau »>
<li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li>
<li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li>
</ul>
</li>
<li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li>
<li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li>
</ul>
</li>
<li><a href= »# » class= »li-premier-niveau »>Niveau1</a>
<ul class= »ul-deuxieme-niveau »>
<li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li>
<li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li>
<li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li>
<li class= »li-deuxieme-niveau li-deuxieme-menu-b »><a href= »# »>Niveau2</a>
<ul class= »ul-troisieme-niveau »>
<li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li>
<li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href= »# » class= »li-premier-niveau »>Niveau1</a>
<ul class= »ul-deuxieme-niveau »>
<li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li>
<li class= »li-deuxieme-niveau li-deuxieme-menu-b »><a href= »# »>Niveau2</a>
<ul class= »ul-troisieme-niveau »>
<li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li>
<li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li>
</ul>
</li>
<li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li>
<li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li>
</ul>
</li>
</ul>
</nav>
</div>
-Ensuite le code css:
*,
::before,
::after {
box-sizing:border-box;
margin:0;
padding:0;
}
.navigation-principale {
margin: 20px 50px;
}
.navigation-principale ul{
list-style-type: none;
padding:0;
width: 200px;
}
.navigation-principale a{
text-decoration: none;
display:block;
padding: .5em;
color: black;
}
.navigation-principale a:hover {
color:white;
background-color:dimgray;
}
#ul-premier-niveau{
background-color: #939393;
}
.ul-deuxieme-niveau{
background-color: #b9b5b5;
}
.ul-troisieme-niveau{
background-color: #dedcdc;
}
.navigation-principale > ul > li {
position: relative;
}
.navigation-principale > ul > li > ul{
position: absolute;
top: 0;
left: 100%;
display: none;
width: 150px;
}
.navigation-principale > ul > li:hover > ul{
display: block;
}
.ul-troisieme-niveau {
display:none;
}
.li-deuxieme-menu-b {
position:relative;
}
.li-deuxieme-menu-b:hover > ul {
display:block;
position: absolute;
top: 0;
left: 100%;
}
Le résulta au survol :
Par la suite je retravaille le code de l’évaluation, tout d’abord la partie mobile.
Au clique sur burger avec déroulement controlé et flèche pivotante sur le deuxième niveau.
Dans le <head>ne pas oublier la partie responsive:
Dans le <header>, pour placer le burger il nous faut placer le <label> (c’est à dire l’étiquette qui va avec la case a cocher) et puis le reste:
<header class= »entete-page »>
<label for= »case-a-cocher » class= »etiquette »></label>
<hgroup class= »groupe-titres »>
<h1 class= »titre-site »><a href= »# »><span class= »mot1″>Eval</span> <span class= »mot2″>Blog</span></a></h1>
</hgroup>
</header>
<input type= »checkbox » id= »case-a-cocher »>
<nav class= »menu-principal menu »>
<ul class= »liste-menu1 menu »>
<li id= »lien-page-courante »><a href= »# »>Blog</a></li>
<li class= »lien-menu2″>
<input type= »checkbox » id= »case-a-cocher2″>
<label for= »case-a-cocher2″ class= »etiquette2″>About</label>
<ul class= »liste-menu2 menu »>
<li><a href= »# »>yes</a></li>
<li><a href= »# »>pourquoi</a></li>
<li><a href= »# »>no</a></li>
</ul>
</li>
<li><a href= »# »>Archive</a></li>
<li><a href= »# »>Contact</a></li>
</ul>
</nav>
Le code CSS:
.menu-principal a:hover,
.lien-menu2:hover {
background-color: #051645;
}
@media screen and (max-width:991px){
.liste-menu1{
margin:0;
}
.menu-principal a {
display: block;
padding: .5rem;
text-align: center;
border-bottom: 2px solid rgba(255, 255, 255, .1);
font-size: 2rem;
}
.menu {
background-color: rgba(255, 255, 255, .1);
}
.etiquette-controle-menu-principal {
text-align: center;
}
.etiquette::before {
content: »\2261″;
font-size: 5rem;
color: white;
line-height: .5;
}
#case-a-cocher {
display:none;
}
.menu-principal{
max-height: 0;
overflow: hidden;
transition: all 1s;
}
#case-a-cocher:checked ~ .menu-principal{
max-height: 100vh;
overflow: hidden;
}
.lien-menu2{
text-align: center;
border-bottom: 2px solid rgba(255, 255, 255, .1);
}
#case-a-cocher2{
display:none;
}
.etiquette2{
font-size: 2rem;
position:relative;
line-height: 2;
}
.etiquette2::after{
content: »⬇︎ »;
color: white;
font-size: 1.5rem;
position:absolute;
display:block;
top:-2px;
left: 7rem ;
transition: all 1s;
}
#case-a-cocher2:checked ~ .etiquette2::after{
transform: rotate(-180deg);
}
.liste-menu2{
max-height: 0;
overflow: hidden;
transition: all 1s;
}
#case-a-cocher2:checked ~ .liste-menu2{
max-height: 100vh;
overflow: hidden;
}
}
Après la partie PC:
@media screen and (min-width:992px){
.pied-page::before,
.article::before,
.super-entete::before{
content: » »;
display:table;
}
.pied-page::after,
.article::after,
.super-entete::after{
content: » »;
display:table;
clear:both;
}
.super-entete{
background-color: rgba(255, 255, 255, .1);
margin-bottom:10px;
height: 80px;
width: 1120px;
margin: auto;
}
.entete-page{
float:left;
background-color:rgba(255, 255, 255, 0);
padding:1rem 0 0 2rem;
}
.titre-site{
float:left;
padding:0;
}
.slogan{
float:left;
line-height: 3.5;
padding-left: 1.5rem;
}
#case-a-cocher,
#case-a-cocher2{
display:none;
}
.menu-principal{
float:right;
}
.liste-menu1{
margin: 0;
}
.menu-principal li{
padding: 1.4rem;
font-size: 1.3rem;
text-align: center;
height: 80px;
}
.liste-menu1>li{
float:left;
}
.liste-menu1 li:hover{
background-color: #051645;
}
.liste-menu2>li{
border-bottom: 2px solid #1d3169;
}
.lien-menu2{
position: relative;
width: 130px;
}
.liste-menu2{
max-height:0;
overflow:hidden;
position: absolute;
z-index:100;
background-color: rgb(63, 63, 116,.95);
top: 100%;
right:0;
transition: all 1s;
}
#case-a-cocher2:checked ~ .liste-menu2{
max-height: 100vh;
overflow:hidden;
}
.etiquette2::after{
content: »⬇︎ »;
color: rgba(255, 255, 255, .5);
font-size: 1.5rem;
position:absolute;
display:block;
top:1rem;
left: 6rem ;
transition: all 1s;
}
#case-a-cocher2:checked ~ .etiquette2::after{
transform: rotate(-180deg);
}