Dernière mise à jour : août 2022
<ul class="votre_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>
<li><a href="#">Rubrique</a></li>
</ul>
*{box-sizing:border-box}
.votre_menu{
padding:0;
margin:0;
}
.votre_menu li{
display: flex;
justify-content: center;
height: 50px;
line-height: 50px;
text-transform: uppercase
}
.votre_menu li a{
color: #999;
}
@media screen and (min-width:37.5em){
.votre_menu{
display: grid;
overflow: hidden;
margin: 2rem auto;
grid-template-columns: repeat(5,1fr);
box-shadow: inset 0 0 8px rgba(0,0,0,.2);
border-radius: 8px;
}
}
@media screen and (min-width:62.75em){
.votre_menu li a{
text-shadow:0 -50px #7d68e8;
line-height: 150px;
margin-top:-50px;
transition:.2s ease-in-out
}
.votre_menu li a:hover{
margin-top:0
}
}
Télécharger la démonstration :
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.