Task Clarification
Lately, I've been working on developing a left-side navigation bar for my webpage. This bar consists of two levels of items. When viewed on a smaller device, only the icons of the first level appear. Hovering over these icons triggers a dropdown of sub-items to display on the right side of the bar - a feature that seems to be working well.
https://i.sstatic.net/2cauJ.png
However, I faced a challenge when implementing the functionality for normal devices. My plan was to have the first level items act as dropdown headers, with sub-items expanding under their parent items upon clicking. To achieve this, I intended to set the sub-items container beneath the main items with a height: 0px; and expand it using a JavaScript onclick event with a CSS transition.
https://i.sstatic.net/LImjo.png
But as you can see from the image, the sub-items end up hovering over the main item.
Query
How can I ensure that the sub-item list appears between the main items and not on top of them? And, importantly, how can this solution remain responsive without compromising the layout?
Note: I am determined to create a custom navbar and hence, using Bootstrap is not an option. Also, please excuse any shortcomings in the code provided, as this is my initial attempt.
Code