Bonjour,
J'ai suivit le tutoriel suivant sur les menus responsive : lien
mon soucis est que lorsque je veux l'adapter en remplacant les 'a' par des 'li>a' le tout dans des 'ul' afin d'y mettre un menu et des sous-menus le menu responsive ne se positionne plus correctement.
Quelqu'un l'aurait-il déjà fait pour ce genre de menu ?
voilà mon code actuel :
<header>
<a href="#" class="header__icon"></a>
<a href="#" class="header__logo">Logo</a>
<nav>
<ul class="menu-principal">
<li><a href="#">aaa</a>
<ul class="sous-menu">
<li><a href="#">fff</a></li>
<li><a href="#">qqq</a></li>
</ul>
</li>
<li><a href="#">zzz</a></li>
<li><a href="#">eee</a></li>
<li><a href="#">rrr</a></li>
<li><a href="#">ttt</a></li>
</ul>
</nav>
</header>
nav{
float: right;
ul{
// display: block;
// position: relative;
li{
display: inline;
&:hover{
.sous-menu{
display: block;
position: absolute;
}
}
}
}
.sous-menu{
display: block;
}
}
et enfin le css responsive
nav{
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: red;//@gris;//rgba(64, 63, 65, 1);
width: 200px;
ul{
li{
display: block;
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px solid black;
&:hover{
.sous-menu{
display: block;
position: relative;
}
}
}
}
.sous-menu{
display: block;
}
}
Merci d'avance pour votre aide !
Amoureusement, Moi