You can make a custom menu, but you don’t necessarily need to make custom a dropdown element, I typically just use the native drop-down element inside of a custom mobile menu. The main issue with yours is that the size (height) of the links, so when some of the drop downs are open it expands outside of the viewport. Once you’ve changed the height and removed the on hover interaction to just on click, I had no issues.
Going down the custom menu route is what you will do eventually, the native Webflow element works great to get you started tho… but if you feel ready I always recommend building out your own as you just have so much more control.
To hide the menu from over your workspace, just set the height to 0% once you’ve finished editing (With overflow hidden) and then in your interactions on click of the burger, it will go from 0% (the initial state) to 100% (Fill the screen). So basically change height of it to 100% to edit it and then back to 0% before you publish.
Building a custom drop down is a bit more complex, but basically you need to have a hover trigger effect on the dropdown div, which has the dropdown pane inside of it. So that when you hover on the dropdown, it either shows / changes size of the dropdown pane inside of it while still holding that hover trigger as you are still on the element, but inside of it is the actual pane with links etc etc.