Actually, I think there is a solution, and it’s in the same vein than the hack I’ve been creating for drop down menu on :hover.
For dropdown on hover, I faced a similar issue: I had to register the hoverout to close the menu, but I couldn’t now by advance if the cursor would slide on the menu itself or stay on the menu item: I coudln’t know if the hoverout would register on the item or menu list. So I ignored the hoverout on the menu item, and instead artificially expanded the span of the manu list over the menu item, with a top padding.
We could do the same for onclick dropdown, expand the menu list over the menu item, so when either a click on the item or list is made, it’s actually registered as a click on the list and closes it. We would then delete the second click action on the item.
I don’t know why I haven’t thought about that before, I feel silly now… You can ceck on http://sab.webflow.io on the menu and dropdown section how the dropdown on hover is made, it’s the exact same principle.