如何设计具有下拉效果的下拉菜单？

Question

I am trying to do a dropdown menu with animation.

So far I finished a common dropdown like below example.

 input { display: none; } label { cursor: pointer; display: inline-block; padding: 10px 20px; border: 1px solid; border-radius: 4px; background: transparent; color: #000; z-index: 100; } .menu { -webkit-transition: all .3s ease; height: 0; overflow: hidden; width: 200px; background: red; height: 100px; z-index: -1; /* transform: translateY(-100%); */ /* I want it drawn down behind the button */ } input:checked+.menu { transform: translateY(50%); } 

 <label for="check">Click me</label> <input id="check" type="checkbox"> <div class="menu"> <p>I am dropdown menu</p> </div> 

My purpose, however, is to design a menu that can slide down (draw down) behind

the button. I had set the z-index to those elements but not works.

Also, I cannot set the background color to the toggle button, I need to keep it transparent.

Any suggestions?

Answer 1

Check below changes of css making menu element absolute and padding of top

 input { display: none; } label { cursor: pointer; display: inline-block; padding: 10px 20px; border: 1px solid; border-radius: 4px; background: transparent; color: #000; z-index: 100; } .menu { -webkit-transition: all .3s ease; height: 0; overflow: hidden; width: 200px; background: #ffffff; height: 100px; z-index: -1; position:absolute; padding-top:35px; border:1px solid #000000; border-radius: 4px; } input:checked+.menu { transform: translateY(-40px); } 

 <label for="check">Click me</label> <input id="check" type="checkbox"> <div class="menu"> <p>I am dropdown menu</p> </div>