Jquery – Mobile and Tablet device for navigation with sub menus css/jquery

On navigation menu, there are sub-menus that will appear on hover

Navigation html is something like this:

<nav>
    <li>
        <a href="shop.html">Shop</a>
        <ul>
           <li><a href="shoes.html">Shoes</a></li>
           <li><a href="shirts.html">Shirts</a></li>
        </ul>
    </li>
    <li>
        <a href="about.html">About</a>
        <ul>
           <li><a href="history.html">History</a></li>
           <li><a href="stories.html">Stories</a></li>
        </ul>
    </li>
</nav>

So basically on Desktop view, :hover Pseudo-class works, Sub Menu appears on mouse over and disappear on mouse out.

But on Mobile or tablet devices, of course hover wont work since its just finger touch functionality. So here's what happen on devices, on touch, sub menu will appear, but wont disappear on 2nd touch, it will only disappear if screen touch outside the menu

What's the best approach on this for touch functionality? Since the main navigation are links too and hover doesn't work on mobile/tablets? So maybe like 1st touch sub menu will appear and double rapid touch redirects the link and 2nd touch closes the sub menu.

Any idea how to do that? Is it also possible to use only css3 and no js at all? but if not jquery is cool for me..

thanks 🙂