响应式Navbar：与Itembar重叠的子项

Question

明确任务简介

我的页面左侧有一个Navbar。它有两个级别的项目。当它显示在小型设备中时，仅显示第一级的图标。如果将鼠标悬停在其上，则会在条形图的右侧显示一个子项目下拉列表。到目前为止一切都很好。

当用户使用普通设备时，第一级项应显示为下拉标题，子项应在其父项下展开。因此，我计划在主要项目下使用height: 0px;设置子项容器，并使用javascript-onclick和css过渡进行加密。

但是你可以看到子项悬停在主要项目上。

问题

我如何确保subitemlist在主要项目之间而不是在主要项目之间？  此外，解决方案不应该破坏响应。

注意：我真的想制作自己的导航栏，因此使用Bootstrap不是一种选择。此外，如果代码不是最好的，我很抱歉，这是第一次尝试。

代码

I have put the whole thing in a jsfiddle

Answer 1

你不能把它放在侧边栏中，你必须把它放在它下面