I’ve a top nav bar and under the Products menu item, if you hover your mouse over it on desktop / pc, a sub-menu will slide down. The Products menu item itself links to a section in the page.
Problem is, on mobile, we cannot hover, so when the user clicks the hamburger menu, the main menu slides down, and if you click the “Products” menu item, depending on where you click it, it will either go down to the section in the site, or it will slide down the menu.
Here’s the published site: http://mysite4a.webflow.io/
Here’s the read-only: https://preview.webflow.com/preview/mysite4a?preview=5de18a509956bc4cfe3d704cb4c28fe6
You can only see the issue if you go to the published site on your mobile (because phones have no hover abilities)
So, the behavior seems random and rather inconsistent. Especially, if you click the small Down arrow icon to the right of the Products menu item, the entire hamburger menu slides back up without the links working.
How do people usually handle stuff like this from a UI point of view (submenu drop-down on mobile phones)?