css - 带悬停的菜单，如何在移动设备上工作？

Question

我正在使用 Bootstrap 3。我有这个菜单，只有在不是触摸(移动)设备时才能正常工作:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#ayuda">Ayuda</a></li>
        <li><a href="javascript:;">Metodología<span></span></a>
            <div class="nav-sub-menu">
                <ul class="text-submenu">
                    <li style="padding-left=0px"><a href="#guia-metodologica">Guía Metodológica</a></li>
                    <li style="padding-left=0px"><a href="#modelos-y-resultados">Modelos y Resultados</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#glosario">Glosario</a></li>
        <!--<li><a href="#link-de-interes">Link de Interés</a></li>-->
        <li><a href="#contacto">Contacto</a></li>
    </ul>
</div>

在css中，赋予元素样式的hover有这样的代码:

.nav li > a {
    display: table-cell;
}
.nav>li>a:hover {
    background: none;
    color: #ff7113;
}
.nav > li > ul {
    display:none;
    list-style:none;
    position:relative;
}
.nav > li:hover > ul {
    display:block;
}

我读过一些关于在没有悬停、使用 javascript 甚至使用外部库的情况下为桌面和触摸制作菜单的帖子。有没有更简单的方法在移动设备中使用此菜单？

我制作了一个带有菜单的 Jsfiddle:

https://jsfiddle.net/esqkx349/

你必须在宽屏幕上打开它才能看到它，像这样:

Answer 1

以防万一，还有人找到解决这个问题的方法，

在<div class="navbar-collapse collapse">中添加onclick="void(0)"使移动设备将元素识别为带有悬停的元素。

喜欢<div class="navbar-collapse collapse" onclick="void(0)">