折叠式选单：我的子选单无法转换

Question

我正在尝试仅使用引导程序自己制作可折叠的侧边栏。 我的子菜单需要一些帮助。到目前为止，其他所有操作均按预期进行。

我已经尝试过用不同的容器包装元素并使它们可折叠。我还尝试将子菜单移到mainMenu中的不同位置。 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/

我希望我的菜单平稳折叠。 实际上，我的子菜单没有过渡，只是消失了。