Bonjour
Je réalise un dropmenu menu le soucis est que lors de l 'animation
la div ayant la classe info translate elle apparait au dessus de
la div ayant la classe entete
code html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 <div class="content"> <div class="entete"> <button class="btn1"> <span>Langages (click me)</span> <svg xmlns="http://www.w3.org/2000/svg" class="arrow" width="15px" height="15px" viewBox="0 0 24 24"><path d="M12 16L6 10H18L12 16Z"></path></svg></button> </div> <div class="info"> <ul> <li><a href="#"> HTML</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">React JS</a></li> <li><a href="#">ThreeJS</a></li> <li><a href="#">Typescript</a></li> </ul> </div> </div>
code CSS:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 .entete{ height: 30%; position: relative; z-index: 5; } .info{ transform: translateY(-100%); visibility: hidden; transition: transform 0.3s, visibility 0.3s; }
Pourrais-je avoir des pistes pour résoudre ce soucis ?
https://codepen.io/alpha_66/pen/KKJgyxG
Merci.
Partager