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

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>