En ocasiones tenemos un menú que contiene submenús, estos en escritorio se ven de maravilla, pero cuando los visualizamos desde un dispositivo móvil se hacen muy largos, dependiendo de la cantidad de ítem que tenga el submenú, como se muestra en la siguiente imagen.

Para solucionar esto se puede convertir este tipo de menú a un menú desplegable que nos dejara mostrar/ocultar os ítems de los submenús.
En este post te ayudaremos a convertir el menú móvil por defecto de WordPress a un menú desplegable.

Los niveles hacen referencia a los submenú de cada menú y el nivel 1 solo se coloca a aquel elemento que tenga un submenú.
Colocar las clases CSS a los ítems del menú
Tenemos que colocarle una clase CSS a cada uno de los ítem del menú que utilizaremos, para esto tenemos que activar la opción de clase CSS en WordPress, hacemos lo siguiente:
En la pagina del menú activamos la opción de “Opciones de pantalla” y marcamos la opción de “Clase CSS” y esto nos debería dejar colocar una clase CSS a cada uno de los ítems del menú.
Una vez echo lo anterior procederemos a colocarle las clases a los ítems del menú, en cada nivel colocaremos las siguientes clases:
- Nivel 1 : first-level
- Nivel 2 : second-level
- Nivel 3 : third-level
- Nivel 4 : fourth -level

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
/* Icono Inicio */
.et_mobile_menu .first-level > a:after {
font-family: ‘ETmodules’;
content: ‘\4c’;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: ‘\4d’;
}
Este fracmento de codigo se repetira dependiendo de los niveles que tengan el submenu
– Ej: Si el menu tiene el siguiete formato
Continente ————‘Nivel 1’
ㅤㅤ– America———-‘Nivel 2’
ㅤㅤㅤㅤ– México————‘Nivel 3’
ㅤㅤ– Europa ————-‘Nivel 2’
ㅤㅤㅤㅤ– España ———–‘Nivel 3’
ㅤㅤㅤㅤ– Portugal ———-‘Nivel 3’
El fractemto de codigo se repetira 2 veces para que el icono de desplegar aparesca en el nivel 1 y 2.
° Unicamente cambiara el nombre de la clase first.level a second-level
CSS para ocultar y desocultar los submenus
Si solo tiene 2 niveles se dejara igual, pero si hay 3 niveles se colocara una regla para la clase
del tercer nivel.
.second-level {
display: none;
}
.reveal-items {
display: block;
}