如何設計具有下拉效果的下拉菜單？

Question

我正在嘗試使用動畫制作下拉菜單。

到目前為止，我完成了以下示例中的常見下拉列表。

 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> 

但是，我的目的是設計一個可以向后滑動（下拉）的菜單

按鈕。 我已經將z-index設置為這些元素，但是沒有用。

另外，我無法將背景顏色設置為切換按鈕，我需要保持背景透明。

有什么建議么？

Answer 1

檢查以下css的更改，使菜單元素變為絕對且頂部填充

 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>