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.