I'm using Bootstrap 3. I have this menu which works ok only when is not a touch (mobile) device:
<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>
In the css, the hover that give the style to the elements have this code:
.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;
}
I've read some posts about making menus for both desktop and touch without hover, with javascript or even using external libraries. Is there are more simple way to use this menu in mobiles devices?
I made a Jsfiddle with the menú working:
https://jsfiddle.net/esqkx349/
You have to open it in a wide screen to see it, like this: