1

Tengo un problema con el sub menú de mi barra de navegación, este al desplegarse se coloca detrás de los demás elementos HTML y quería que siempre el sub menú se muestre siempre delante.

Aquí la imagen : enter image description here

Codigo CSS :

   #header {

    font-family:Arial, Helvetica, sans-serif;
    text-align: center;

   }

   ul, ol {
    list-style:none;
   }

   .navBar > li {
    background-color: #504188;
    border-radius: 3px;
    display:inline-block;
    position: relative;
   }

   .navBar li a {
    background-color:#504188;
    color:#fff;
    text-decoration:none;
    padding:10px 15px;
    display:block;
   }

   .navBar li a:hover {
    background-color:#434343;
   }

   .navBar li ul {
    display:none;
    position:absolute;
    min-width:170px;
   }

   .navBar li:hover > ul {
    display:block;
   }

   .navBar li ul li {
    position:relative;
   }

   .navBar li ul li ul {
    right:-140px;
    top:0px;
   }

Gracias de antemano, espero puedan ayudarme ya que llevo días con esto y no le encuentro solución.

1 respuesta 1

1

Debes ponerle en el estilo CSS que le corresponda un 'z-index' superior al del resto. Ejemplo:

   .submenu{z-index:9999999999}
2
  • Con solo colocar 999 basta. Commented el 10 dic. 2019 a las 20:38
  • Por eso es puesto 'ejemplo:', y tantos 9 para que se vea claro, es probable que la clase sobre la que lo aplique no se llame '.submenu'. De hecho con poner un número que sea +1 al que tenga el elemento que debe ir debajo vale, tampoco tiene porqué ser 999.
    – JorgeGuz
    Commented el 10 dic. 2019 a las 20:46

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.