Как сделать так, чтобы анимация перехода работала с ховербоксом css?

Question

Я пытаюсь создать набор html + css hover. Они похожи на выпадающее меню.

Желаемое поведение - когда пользователь наводит курсор на блок, другой блок прокручивается вниз над первым блоком.

В настоящее время над текстом появляются поля и они отвечают на стили, но я не могу вызвать эффект перехода.

Я попытался передать свойство css max-height с помощью следующего кода:

<div id="boxbar">
      <ul id="boxbar-table">
        <li class="boxbar-col boxbar-col-left" id="boxbar-col-1">
          Services <i class="fas fa-angle-down"></i>
          <ul class='boxbar-rollover'>
            <li><a href="#">Web Development</a></li>
          </ul>
        </li>
        <li class="boxbar-col boxbar-col-right" id="boxbar-col-2">
          Services <i class="fas fa-angle-down"></i>
          <ul class='boxbar-rollover'>
            <li><a href="#">Web Development</a></li>
          </ul>
        </li>
      </ul>
    </div>

Вот код:

/* Hide nested ul by default */

#boxbar ul li:hover {
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
}

#boxbar ul li:hover a {
  color: #fff;
}

#boxbar ul li ul {
  display: none;
}
#boxbar ul li ul li {
  max-height: 0;
  transition: max-height 2s;
}

/* Nested dropdown show */
#boxbar ul li:hover ul {
  display: block;
  position: absolute;
  left: -100px;
  top: -258px;
  width: 200%;
  margin-top: 1rem;
}
#boxbar ul .boxbar-col-left:hover ul {
  left: 0;
}
#boxbar ul .boxbar-col-right:hover ul {
  left: -100%;
}

#boxbar ul li:hover ul li {
  z-index: 10;
  display: block;
  background: #e9e9e8;
  max-height: 302px;
}

Вот полный код на github. https://github.com/twheelertech/boxbar

Регулирует максимальную высоту, но высота не изменяется при наведении. Я попытался настроить таргетинг на родительский ul, но не могу заставить работать переходы.

Я хочу, чтобы второе окно, казалось, прокручивалось вниз.

Как я могу это сделать? Нужно ли менять структуру HTML?