Анимированное выпадающее меню без JavaScript

В заметке о простом выпадающем меню был показан пример того, как можно с минимальными усилиями построить простое выпадающее меню. Но анимированное выпадающее меню без JavaScript смотрится ещё привлекательней. В текущей заметке приводится пример такого меню. Будьте готовы к тому, что потребуются глубокие знания верстки: знание CSS-свойств display, overflow, transition; знание элементов ul и li, понимание работы строчных и блочных элементов.

Анимированное выпадающее меню без JavaScript

Ссылка на готовый код меню

Структура HTML для создания выпадающего меню

<nav class="menu">
  <ul>
    <li><a href="#">Lorem.</a></li>
    <li><a href="#">Lorem.</a></li>
    <li><a href="#">Explicabo?</a>
    
      <ul>
        <li><a href="#">Lorem.2</a></li>
        <li><a href="#">Eveniet.2</a></li>
        <li><a href="#">Omnis.2</a></li>
        <li><a href="#">Beatae.2</a></li>
      </ul>
    
    </li>
    <li><a href="#">Doloribus.</a></li>
    <li><a href="#">Doloribus.</a>
    
       <ul>
        <li><a href="#">Lorem.2</a></li>
        <li><a href="#">Eveniet.2</a></li>
        <li><a href="#">Omnis.2</a></li>
        <li><a href="#">Beatae.2</a></li>
      </ul>
    
    </li>
    <li><a href="#">Doloribus.</a></li>
    <li><a href="#">Sint.</a></li>
  </ul>
</nav>

CSS-код для создания меню с анимацией

.menu ul{
  padding: 0;
  margin: 0;
  display: table;
  width: 100%;
}
.menu li{
  display: table-cell;
  background-color: #f63;
  text-align: center;
  position: relative;
}
.menu ul ul {
  display: block;
  position: absolute;
  height: 0;
  overflow: hidden;
  transition: height 0.5s 0.5s ease-out
}
.menu ul ul a{
   background-color: #369;
}

.menu ul ul a:hover{
   background-color: #69e;
}
.menu ul ul li{
  display: block;
}
.menu a {
  color: #fff;
  text-decoration: none;
  height: 50px;
  display: inline-block;
  line-height: 50px;
  width: 100%;
  text-transform: uppercase;
}
.menu a:hover {
  background-color: #f96;
}
.menu li:hover ul {
  /*display: block;*/
  height: 200px;
}