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;
}
}