How to create fully responsive css navigation?

Question

css

For self-development, I decided to practice layout and the first thing that came to my mind was to make adaptive navigation. It seems to work, but one moment does not give rest. To save you from the thought of running away from this topic, having seen the "experimental roll of code", I will not show it, but only say that those who know what it is about will understand me without the code.
There is a navigation bar with a menu set to position: relative. When you hover over an item,
if there is, a submenu is opened with position: absolute. If you reduce the size of the browser, then the navigation becomes not horizontal, but vertical.
And now the most important thing. If I hover over an item, the submenu expands below the main one.
The only thing I came up with was to set position: relative in /@media.
And now the question is - is there another way without /@media?

Answer 1

Did I understand you correctly, you want responsive navigation and don't want to use media queries?
And the answer to your question - there is a way - js