There is a CSS menu. Drops out on hover. How to make a compatible menu with tablets out of it?

Question

css

Here is the menu code - codepen.io/anon/pen/WQGaNp
How to make it so that:
1) On a tablet / phone: the first time you press it, the menu drops out. On the second click, it collapsed.
2) On a computer: when hovering, it would drop out, and when clicked, would the link work?

Answer 1

Once sketched the principle of operation of such a menu.
Through modernizr we catch devices with a touchscreen and through js we add / remove a class with the same styles as :hover