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

Como ¿Cómo hacer que el Sub MenuMenú 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 diasdías con esto y no le encuentro solucionsolución.

Como hacer que el Sub Menu 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 dias con esto y no le encuentro solucion.

¿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.

Origen Enlace

Como hacer que el Sub Menu 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 dias con esto y no le encuentro solucion.