Error in the submenu only when accessing from the cell phone

Good day, I am generated an error or failure on the next page under construction:

link

When I access from a phone (must access from one since in PC this error is not generated) the menu works well (it is displayed), the tab "meet and events" opens well, but when opening the tab "other services "(being open the fulfillment) is given as a double selection and redirects to the" other services "section without letting me visualize the options of the submenu. This failure is only made if the submenu of fulfillment is open, and if I point to the "O" of OTHER SERVICES, it displays the submenu without problems ....

What could be what makes me fail? there I pass the html, css and js code from the menu:

<nav id="ioMenu">
        <figure id="showMenu" class="ioMenuMovil" onClick="displayMenu()"><img src="imagenes/menu.png" alt="menu"></figure>
        <div id="cardMenu">
            <figure id="hideMenu" class="ioMenuMovil exit" onClick="displayMenu()"><img src="imagenes/exit.png" alt="exit"></figure>
            <figure id="logoMenu"><img src="imagenes/descarga.png" alt="logo diseñadora"></figure>
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="diseño Grafico.html">DISEÑO GRAFICO</a></li>
                <li><a href="bolsas de papel.html">BOLSAS DE PAPEL IMPRESAS</a></li>
                <li><a href="carteleria.html">CARTELERIA</a></li>
                <li id="cYE"><a href="#">CUMPLES Y EVENTOS <span>"flecha"</span></a>
                    <ul id="subMenuCyE">
                        <p>Diseños personalizados de</p>
                        <li><a href="cumples y eventos.html">SOUVENIRS</a></li>
                        <li><a href="cumples y eventos.html">TARJETAS </a></li>
                        <li><a href="cumples y eventos.html">PINS</a></li>
                        <li><a href="cumples y eventos.html">BANDERINES</a></li>
                        <li><a href="cumples y eventos.html">MESAS DULCES</a></li>
                        <li><a href="cumples y eventos.html">BOLCITAS PARA CARAMELOS</a></li>
                        <li><a href="cumples y eventos.html">CAJITAS</a></li>
                    </ul>
                </li>
                <li id="otrosServicios"><a href="#">OTROS SERVICIOS <span>"flecha"</span></a>
                    <ul id="subMenuOS">
                        <li><a href="otros servicios.html">PAPELERIA COMERCIAL</a></li>
                        <li><a href="otros servicios.html">MANEJO DE REDES</a></li>
                        <li><a href="otros servicios.html">TARJETAS Y SOUVENIRS</a></li>
                        <li><a href="otros servicios.html">DISEÑO WEB</a></li>
                        <li><a href="otros servicios.html">ESTAMPADOS Y BORDADOS</a></li>
                        <li><a href="otros servicios.html">SUBLIMACION</a></li>
                        <li><a href="otros servicios.html">PINS PUBLICITARIOS</a></li>
                        <li><a href="otros servicios.html">IMPRESION FOTOGRAFICA</a></li>
                    </ul>
                </li>
                <li><a href="formularioContacto.html">CONTACTANOS</a></li>
            </ul>
        </div>
        <div><a id="contact_button" href="formularioContacto.html"></a></div>
    </nav>

and the css

/*----------------------------MENU--------------*/
nav .ioMenuMovil{
width: 150px;
height:30px;
margin: 0 0 0 8px;
overflow: hidden;
padding: 0;
position: absolute;
top: 2px;
display: inline-block;
cursor: pointer;
}

nav .ioMenuMovil img{
height: 75%;
padding-top: 4px;
}


/*-----------------TARJETA EXIT------------------*/
nav #cardMenu{
background: #fff;
width: 78%;
max-width: 250px;
position: absolute;
padding-bottom: 30px;
top: 0;
border-right: 3px solid #A7A7A7;
border-bottom: 3px solid #A7A7A7;
display: none;
z-index: 999;
}
nav #cardMenu #hideMenu img{
height: 24px;
}

nav #cardMenu #logoMenu{
margin-bottom: 30px;
margin-top: 50px;
}

nav #cardMenu #logoMenu img{
width: 40%; 
position: relative;
left: 30%;
}

nav #cardMenu ul{
position: relative;
margin-left: 20%;
}

nav #cardMenu ul li{
position: relative;
list-style: none;
}

nav #cardMenu ul li a{
text-decoration: none;
color: #605F5F;
font-size: 1.0em;
padding: 10px 20px 10px 0px;
display: block;
}

/*----------------SUBMENUS-----------------------*/

nav#ioMenu #cardMenu ul li ul#subMenuCyE{
width: 90%;
font-size: 1em;
position: relative;
margin: 0 ;
top: 0;
left: 15px;
display: none;
}

nav#ioMenu #cardMenu ul li ul#subMenuOS{
width: 90%;
display: none;
position: relative;
margin: 0;
top: 0;
left: 15px;
}

nav#ioMenu #cardMenu ul li#otrosServicios:hover>ul{
display: block;
}

nav#ioMenu #cardMenu ul li#cYE:hover>ul{
display: block;
}

and the js is:

function displayMenu(){
var display;
var cardMenu = document.getElementById("cardMenu");
display = cardMenu.style.display;
if(display == "none"|| display.length == 0){ /*|| display.length == 0  detecta el estado del menu*/
    cardMenu.style.display = "block";
}
else{
    cardMenu.style.display = "none";
}

function navSection(nav){
var search;

document.getElementById("cardMenu").style.display = "none";//////////*CIERRA MENU AL SELECCIONAE LA SECCION*/

for (var i = 0; i < 6; i++) {
    search = document.getElementById(sections[i]);
    search.style.display = "none";

    if(sections[i] == nav){
         search.style.display = "block";
    }
}

}

Thanks in advance.