Выпадающее меню CSS переходов должно быть простым

Question

Я пытался оживить этот маленький кусочек кода, я знаю, что не могу оживить: display: none;Итак, я попытался изменить высоту ul, но это не работает ...

Пожалуйста, помогите мне ... Это должно быть просто, но я не могу понять ...

Спасибо за каждый ответ!:)

https://jsfiddle.net/qwv2jLpd/1/

document.querySelector(".menu p").onclick = function() {
  let seznam = document.querySelector(".menu ul");
  if (seznam.classList.contains('menu_invisible')) {
    seznam.classList.remove('menu_invisible');
  } else {
    seznam.classList.add('menu_invisible');
  }
}

.menu_invisible {
  display: none;
}

.menu {
  cursor: pointer;
}

<div class="menu">
  <p>>>Show drop down menu
    <<</p>
      <ul style="transition: all 500ms ease;" class="menu_invisible">
        <li><a href="#">whatever</a></li>
        <li><a href="#">I don't know</a></li>
        <li><a href="#">Why it</a></li>
        <li><a href="#">doesn't</a></li>
        <li><a href="k#">work?</a></li>
        <li><a href="#">Help please...</a></li>
      </ul>
</div>

Answer 1

Этого можно достичь с помощью чистого CSS, если вы хотите инициировать переход с помощью :hover, но вот пример того, как сделать это одним щелчком мыши,

document.querySelector(".menu p").onclick = function()
{
    var ul = document.querySelector('.menu_neviditelne').classList.toggle('active--list');
}

.menu_neviditelne {
  max-height: 0;
  overflow: hidden;
  transition: all 400ms ease-in-out;
}

.menu {
  cursor:pointer;
  user-select: none;
}

.active--list {
  max-height: 500px;
}

<div class="menu">
     <p>>>Zobrazit nabídku<<</p>
      <ul class="menu_neviditelne">
        <li><a href="index.html">Úvod</a></li>
        <li><a href="kavarna.html">Kavárna</a></li>
        <li><a href="nabidka.html">Nabídka</a></li>
        <li><a href="kava.html">O kávě</a></li>
        <li><a href="kariera.html">Kariéra</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
 </div>

Answer 2

Может быть, это поможет вам в некотором роде. :)

@keyframes example{
    0%{height: 150px;}
    100%{height: 180px;}
}

li a.locations:hover{
    background-color: #e15c00;
     animation-name: example;
     animation-duration: 1s;
}