Links with hover styles on touch devices are a bit of a complication. In short, they don’t really exist on these devices. Creating fancy :hover styles can really add to the browser experience and help simplify your layout, but they simply will not work on a touch device. When a tablet or smartphone user taps your hover-styled link elements, the hover style shortly appears, and immediately the underlying link is followed/activated.
 
So how do we handle this problem? Do we sniff out touch devices and disable hover classes? Not at all: it can be fixed using jQuery, and with some minimal adjustments you can keep using your hover styles across all browsing devices
 
THE GOAL
 
When a touch user taps menu A, only the hover style for menu A is activated but the link does not open. After this, there are two possible options:
 
1. User taps menu A again -> menu A is opened.
2. User taps menu B -> mouseover for menu B is activated and the hover style for menu A is deactivated.
 
Another thing to keep in mind is that if a user taps menu A, then taps menu B and then taps menu A again, it should not consider menu A as being tapped for a second time (which would lead to the browser to open the link).
 
WHAT WE NEED TO ACCOMPLISH
 
To realize our goal, we need to accomplish the following using (jQuery)