Dropdown menu avec propriété visibility
Code :
HTML
<nav class="menu-visibility">
<ul>
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a></li>
<li class=sous-rub><a href="#!">rubrique</a>
<ul class="liste">
<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>
<li><a href="#">rubrique</a></li>
</ul>
</nav>
CSS
.menu-visibility{
display: grid;
justify-items: start;
margin: 3rem auto 12rem auto;
}
.menu-visibility ul {
padding: 0;
display:grid;
list-style: none;
}
.menu-visibility li{
background-image: linear-gradient(white,#e8e8e8 50%);
display:flex;
justify-content: center;
}
.sous-rub{
position: relative;
display: flex;
align-items: center
}
.sous-rub::after{
margin-right: 4px;
content: '';
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent currentcolor;
}
.sous-rub:hover .liste,
.sous-rub:focus-within .liste {
opacity: 1;
visibility: visible;
}
.sous-rub ul{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.41)
}
.menu-visibility li a {
color:currentcolor;
padding: 5px 20px;
text-decoration: none;
}
.liste {
left: 100%;
opacity: 0;
position: absolute;
top:0;
z-index:1;
visibility: hidden;
transition: opacity .25s linear, visibility .25s linear
}
@media screen and (min-width:62.75rem){
.menu-visibility{
justify-items: center
}
.menu-visibility ul:not(.liste){
grid-template-columns: repeat(5,1fr);
}
.liste {
left: 0;
right:0;
top:100%
}
.sous-rub::after{
transform: rotate(90deg)
}
}
Vous rencontrez un problème avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.