Складное меню: возникли проблемы с переходом для моего подменю

Question

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

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

Здесь находится мое подменю:

<li>
    <a>
      <span class="menuItemIcon fas fa-tachometer-alt"></span>
      <span class="menuItemText collapse show width">
        <p class="menuItemTextWrapper">Tintenfische</p>
      </span>
    </a>
    <ul id="subMenu" class="collapse show">
      <li class="collapse show width">
          <a href="#">
            <span class="menuItemIcon fas fa-tachometer-alt"></span>
            <span class="menuItemText">
              <p class="menuItemTextWrapper">Schmecken nicht!</p>
            </span>                
          </a>
      </li>
      <li class="collapse show width">
          <a href="#">
            <span class="menuItemIcon fas fa-tachometer-alt"></span>
            <span class="menuItemText">
              <p class="menuItemTextWrapper">Schmecken nicht!</p>
            </span>                
          </a>
      </li>
     </ul>
  </li>

Здесь вы можете увидеть остальную часть моего кода: https://jsfiddle.net/iButters/p14ajx7d/240/

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