html - 响应式导航栏 : Sub-Items overlapping Itembar

Question

任务简介

我的页面左侧有一个导航栏。它有两个级别的元素。当它在小设备中显示时，只显示第一级的图标。如果将鼠标悬停在它上面，则会在栏的右侧显示子元素的下拉列表。到目前为止一切顺利。

当用户使用普通设备时，第一级元素应显示为下拉标题，子元素应在点击时在其父元素下展开。所以我计划用 height: 0px; 在主元素下设置子元素容器，并用 javascript-onclick 和 css transition 扩展它。

但如您所见，子项悬停在主项上。

问题

如何确保子元素列表位于主要元素之间而不是超过它？ 此外，解决方案不应破坏响应能力。

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

代码

I have put the whole thing in a jsfiddle

Answer 1

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