Responsive Navbar: Sub-Items overlapping Itembar

Question

Introduction to clearify the task

I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.

When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.

But as you can see the sub-items are hovering over the main item.

Question

How can i ensure that the subitemlist is between the main-items and not over it? Additionally the solution shouldn't destroy the responsivness.

Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.

Code

I have put the whole thing in a jsfiddle

Answer 1

you cant put it in sidebaritem you have to put it below it