Hola @inma_9689, claro que sí. Es un problema común y, con unas pequeñas modificaciones en tu custom.css, podemos conseguir el efecto de tarjeta flotante y solucionar el conflicto de z-index. Para tu PrestaShop 8.2.7, las clases del tema Classic son bastante consistentes y permiten esto.
El problema principal es que el z-index del desplegable de búsqueda necesita ser significativamente más alto que el de tu mega menú. También debemos añadir más estilos para los bordes redondeados, sombras más pronunciadas, y el estilo de las miniaturas y el texto.
Aquí tienes el código CSS que deberías añadir o modificar en tu themes/classic/assets/css/custom.css. Recuerda borrar tu intento anterior o sobrescribirlo con esto:
#search_widget .search-results {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-width: 400px; /* Ajusta este valor si necesitas un ancho fijo */
background-color: #fff;
border-radius: 8px; /* Esquinas redondeadas para el efecto de tarjeta */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Sombra más definida */
padding: 10px;
Explicación de los cambios:
#search_widget .search-results: He aumentado el box-shadow y el border-radius para darle más ese aspecto de tarjeta flotante. El z-index: 1050; debería ser suficiente para que se muestre por encima de tu mega menú (generalmente los menús flotantes usan z-index en el rango de 1000-1040). He añadido max-width para controlar el ancho de la tarjeta.#search_widget .search-results li: Usamos display: flex para alinear horizontalmente la miniatura y el nombre del producto, y un border-bottom para separar cada sugerencia.#search_widget .search-results .product-thumbnail: Aquí definimos el tamaño de la miniatura, le damos un border-radius para que sea redondeada y overflow: hidden para que la imagen no se salga. object-fit: cover asegura que la imagen se ajuste bien.#search_widget .search-results .highlight: Esta clase se usa para resaltar el texto de la búsqueda dentro de los resultados. Le he puesto un fondo de color y un border-radius suave.
Aplica estos cambios en tu custom.css y, si tienes algún sistema de caché en PrestaShop, vacíalo para ver los resultados. Debería funcionar para tu PrestaShop 8.2.7.