Problema con menu móvil

[Alexis88]

Si te fijas en el cuadro en el que se escriben las respuestas de este foro (más abajo), verás que hay un rectángulo con el texto "Highlight" y un triángulo invertido; ese es un <select>. Si das un clic sobre él, verás que se desplegará un listado con varias opciones. Es lo que podrías hacer; tener un <select> con las opciones principales y N <select> con las opciones de los submenús de cada opción principal.

Algo así:

Código HTML:

<!-- Menú principal -->
<select>
    <option>Opción 1</option>
    <option>Opción 2</option>
    <option>Opción 3</option>
    <option>Opción N</option>
</select>
 
<!-- Submenús -->
<select>
    <option>Opción 1 del submenú de la opción 1</option>
    <option>Opción 2 del submenú de la opción 1</option>
    <option>Opción 3 del submenú de la opción 1</option>
    <option>Opción N del submenú de la opción 1</option>
</select>
 
<select>
    <option>Opción 1 del submenú de la opción 2</option>
    <option>Opción 2 del submenú de la opción 2</option>
    <option>Opción 3 del submenú de la opción 2</option>
    <option>Opción N del submenú de la opción 2</option>
</select>
 
<select>
    <option>Opción 1 del submenú de la opción 3</option>
    <option>Opción 2 del submenú de la opción 3</option>
    <option>Opción 3 del submenú de la opción 3</option>
    <option>Opción N del submenú de la opción 3</option>
</select>
 
<select>
    <option>Opción 1 del submenú de la opción N</option>
    <option>Opción 2 del submenú de la opción N</option>
    <option>Opción 3 del submenú de la opción N</option>
    <option>Opción N del submenú de la opción N</option>
</select>
 

La idea sería que los submenús estén ocultos y mediante el evento change en el menú principal, detectes la opción elegida y según sea la opción que se haya seleccionado, muestras el submenú que le corresponda.

Incluso si hubieran submenús de los submenús, al final, solo se mostrarían dos, tres o N <select> representando a cada submenú.

La particularidad de usar un <select> es que, si te queda poco espacio por debajo de él, las opciones se despliegan hacia arriba y viceversa.

Saludos