使用css/jquery子菜单进行导航的移动和平板电脑设备

在导航菜单上，悬停时会出现子菜单

导航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伪类工作，子菜单出现在鼠标上方，鼠标离开时消失

但在移动设备或平板电脑上，hover当然不起作用，因为它只有手指触摸功能。下面是在设备上发生的情况，触摸时，子菜单将出现，但不会在第二次触摸时消失，它只会在屏幕触摸菜单外时消失

触摸功能的最佳方法是什么？因为主导航也是链接，而hover在手机/平板电脑上不起作用？因此，可能会出现第一次触摸子菜单，双快速触摸会重定向链接，第二次触摸会关闭子菜单

你知道怎么做吗？也可以只使用css3而不使用js吗？但如果不是的话，jquery对我来说很酷

---

谢谢：）

检查位于的“多级导航”模式以解决您的子菜单问题