在导航菜单上，有一些子菜单会出现在悬停
上导航html是这样的：
<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>
所以基本上在桌面视图上，：hover Pseudo-class有效，Sub Menu出现在鼠标上并在鼠标输出时消失。
但是在移动设备或平板电脑设备上，由于只是手指触摸功能，当然悬停不会工作。所以这就是设备上发生的事情，在触摸时会出现子菜单，但在第二次触摸时不会消失，只有当屏幕触摸菜单外它才会消失
触控功能的最佳方法是什么？由于主导航也是链接，悬停不适用于手机/平板电脑？因此，可能会出现第一个触摸子菜单，双重快速触摸重定向链接，第二个触摸关闭子菜单。
知道怎么做吗？是否也可以只使用css3而不使用js？但如果不是jquery对我来说很酷..
谢谢：）