Как создать выпадающее меню с эффектом выпадающего меню?

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>