Skip to main content
2 de 2
Reetiquetado de la publicación y cambio en enunciado de la pregunta

¿Cómo hacer que el Sub Menú al mostrarse no se coloque detrás de los demás elementos HTML?

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.