Guillaume Duverger Développeur & graphiste - Blog

Simple et responsive dropdown menu

Dernière mise à jour : août 2022

Le code :



<div class="menu">
<ul>
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a>
<ul class="sub-menu">
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a></li>
</ul>
</li>
<li><a href="#">rubrique</a>
<ul class="sub-menu">
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a></li>
</ul>
</li>
<li><a href="#">rubrique</a></li>
</ul>
</nav>




*{box-sizing: border-box}


ul{
margin: 0;
padding-left: 0;

}
	
.menu > ul {
	
list-style: none;
display:grid;
	
}
		
		
.menu > ul > li a{

background-color: #3c3c3c;
color: #fafafa;
display: flex;
justify-content: center;
padding: 15px;
text-decoration: none;
 
}

	
.menu > ul > li:not(:last-child) a{
	
	border-bottom:1px solid #222
	
	}	
	
.menu > ul li:not(:last-child) ul li:not(:last-child) a{
	
	border-bottom:1px solid #393939
	
	}

.menu > ul li a:not(:last-child){
	
	position: relative;
	
	}
	
.menu > ul  li a:not(:last-child)::before {

position:absolute;
right:.5rem;
content:'';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom: 0;
border-top: 12px solid currentcolor;
top: 0;
bottom: 0;
margin: auto;
transition: 0.5s;
}
	

.sub-menu {
	
background:rgba(60, 60, 60, 0.8);
list-style: none;
max-height: 0;
overflow: hidden;
transition: 0.5s;

}
	
.menu > ul li:focus .sub-menu,
.menu > ul li:focus-within .sub-menu {
	
  max-height: 300px;
	
}
	
.menu > ul li:focus a::before,
.menu > ul li:focus-within a::before {
	
 rotate:-180deg;
	
}

.menu > ul .sub-menu li a{

background: rgba(60, 60, 60, 0.6);
font-size: 0.9em;
	
}
		
		
.menu > ul .sub-menu li a:focus,
.menu > ul .sub-menu li a:focus-within {
	
background: rgba(60, 60, 60, 0.1);
	
}

	

@media (min-width: 40rem) {
  
.menu > ul {
  
grid-auto-flow: column
	
  }
	
.menu > ul > li:not(:last-child) a{
	
	border-bottom:unset
	
	}	
  
}
		

@media (min-width: 60rem) {
		
.menu > ul li:nth-child(n+3):not(:last-child){
	
position: relative;
		
		}	
		
@media (hover) {
	
.menu li:hover a{background:#6753ea}
.menu > ul .sub-menu li a:hover{
	
  background: rgba(60, 60, 60, 0.1);
	
}	
	}
		
.menu > ul li:focus .sub-menu,
.menu > ul li:focus-within .sub-menu{
	
	
	transform:scaleY(1);
	
	}
		
.menu > ul li .sub-menu{
	
transform:scaleY(0);
transform-origin: 0 0;
position:absolute;
left: 0;
right:0;
top:100%;
z-index:1;	
		
	}
		
		}	
	



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.

haut page