How to create a real drop down menu?

Question

css

The key difference is that the submenu does not get visibility, but floats out from under the menu item, with 2 from under 1, 3 from under 2, and so on.
In general, this is not difficult, but it seems to me that I am doing it too complicated: firstly, I assign to each menu rank its own class (SubmenuElementRung) smer1, smer2 ... so that each of them has its own z-index (because in the standard below the written menu item is drawn ABOVE the previous one), and so that each of them floats away when hovering at its distance; and secondly, I don't like the idea of ​​assigning a different z-index to each rank.
Perhaps there is already an implemented version or just masthead thoughts, how to simplify mine?
https://jsfiddle.net/w9yzw5ts/

Answer 1

Throw the code into the sandbox like jsfiddle / codepen , ... So nifiga is not clear)

Answer 2

I may not be an expert, but " display: none; " helps me. There are experiments:
Animated icon
Switchable tabs
CSS dropdowns