Hola @alvarobici, entiendo perfectamente tu problema. Es un escenario común en PrestaShop 1.7 con el tema Classic en móvil, donde el z-index y el contexto de apilamiento pueden ser un dolor de cabeza.
El problema suele ser que el z-index del menú desplegable es alto, pero su elemento padre (o un hermano que le precede en el DOM y tiene position: relative con un z-index bajo) está creando un nuevo contexto de apilamiento que lo limita. Tu intento de z-index: 1000 en el submenú es bueno, pero el contenedor principal del menú móvil (#mobile_top_menu_wrapper) también necesita un z-index alto y position: relative para asegurar que crea un contexto de apilamiento superior y permite que los submenús se muestren por encima de todo lo demás.
Prueba con este CSS en tu themes/classic/assets/css/custom.css. Asegurará que el contenedor principal del menú móvil tenga prioridad y que los submenús se posicionen correctamente:
@media (max-width: 767px) {
/* Aseguramos que el contenedor principal del menú móvil tenga un z-index alto */
#mobile_top_menu_wrapper {
z-index: 1001; /* Mayor que el submenú para el contexto */
position: relative; /* Necesario para que z-index funcione correctamente */
}
/* Estilos para los submenús, asegurando su posicionamiento y visibilidad */
#mobile_top_menu_wrapper .top-menu ul li ul.dropdown-menu {
position: absolute; /* Para que se superponga y no empuje el contenido */
width: 100%; /* Ocupar todo el ancho del contenedor padre */
Con esto, el contenedor principal del menú móvil (#mobile_top_menu_wrapper) obtendrá un z-index más alto y un position: relative, lo que permitirá que los submenús (.dropdown-menu) se posicionen absolutamente dentro de este nuevo contexto de apilamiento, apareciendo por encima del resto del contenido.