2

tardes, noches. Me estoy enfrentando a un inconveniente al hacer un menú con submenús; los elementos li padres que tienen posicionamiento relativo están siendo visibles cuando el submenú (div) es desplegado. A continuación una imagen para explicarme:

introducir la descripción de la imagen aquí

Como pueden observar, el último elemento li del primer submenú está superposicionado en el otro submenú (observar cómo la línea (border-bottom) del último elemento li sobresale en el div)

Esto sería lo único que quedaría faltando para completar la funcionalidad del menú, así que agradezco cualquier tipo de ayuda que me pueda llevar a solucionar este inconveniente.

Sí desean utilizar el código para uso personal o comercial, están en completa libertad de hacerlo.

dejo un fiddle del proyecto: DEMO DEL MENÚ

1 respuesta 1

1

Tienes un código bastante raro de leer, pero para rreglar lo anterior, quita el z-index: 0 (o cambialo a 1 que es mejor practica) que tienes en el selector: div.noru-sub-item div ul li

Y agrega este selector:

div.noru-sub-item div ul li.n-hover:hover{
  z-index: 2;
}

Lo que sucede es que todo está en la misma capa 0 de z-index y no hay nada que indique que los elementos "hover" y submenú, deben estar por encima de la capa 0 y como en el html es cascada, entonces si un elemento como un li esta por debajo de otro y comparten la misma capa de profundidad, siempre el de abajo va a estar encima del elemento anterior en caso de que se sobrepongan usando position: relative o position: absolute.

Con la clase que te digo, solo a los elementos que designes que tendrán submenu, estarán en la capa de profundidad: 2 es decir más arriba. Puedes usar números elevados absurdos como 9999 como hacen algunos a lo loco, pero esto a la final se vuelve inmanejable por lo que te sugiero mantenerlos los z-index del 1 al 10, al 20 o al 100 en caso de ser muy compleja la página.

Si es una aplicación web, los únicos elementos con un z-index superior a 1000 son los recursos externos, como los estilos de bootstrap o los modales y cosas así.

2
  • Amigo, tu solución estuvo perfecta. Soy nuevo en stackoverflow, ¿Debo hacer algo para destacar tu respuesta?
    – user94013
    Commented el 28 jul. 2018 a las 16:59
  • 1
    Si, puedes aceptar mi respuesta como la correcta y votar positivo en ella, eso me serviría mucho, gracias. Me alegra que te sirviera! Commented el 29 jul. 2018 a las 1:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.