El menú desplegable se corta o aparece detrás de div

Tengo un menú desplegable que aparece detrás de mi galería de transición de imágenes div. A continuación se muestra la imagen de lo que parece y el HTML y CSS para ello.El menú desplegable se corta o aparece detrás de div

enter image description here

HTML:

<body> 
<div id="top_bar"> 
<div id="top_inner"> 
<div id="logo"> <a href="http://www.edosbornephotography.com"><img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></a></div> 
<div class="nav"> 
<ul class = "menu" > 
      <li> <a href = "#" > Home </a> </li> 
      <li><a href = "#" > Packages </a> 
      <li><a href = "#" > Weddings </a> 
      <li><a href = "#" id="left" > Lifestyle </a> 
     <ul class = "submenu" > 
      <li> <a href = "#" > Families </a> </li> 
      <li> <a href = "#"> Newborn/Child </a> </li> 
      <li> <a href = "#" > Portraits </a> </li> 
     </ul> 
     </li> 

     <li> <a href = "#" > Blog </a> </li> 
     <li><a href = "#" id="left"> Abous Us </a> 
     <ul class = "submenu" > 
     <li> <a href = "#" > Ed Osborne </a> </li> 
     <li> <a href = "#" > Testimonials </a> </li> 
     <li> <a href = "#" > FAQs </a> </li> 
     </ul> 
     </li> 

     <li> <a href = "#" > Contact Us </a> </li> 
     <li> <a href = "#" > Links </a> </li> 
     </ul> 
    </div> 
</div> 
</div> 

<div id="main"> 

<div id="smart-gallery"> 
    <a href="images/cubagallery-img-1.jpg"> 
     <img src="images/cubagallery-img-1.jpg" /></a> 

    <a href="images/cubagallery-img-15.jpg"> 
     <img src="images/cubagallery-img-15.jpg" /></a> 

    <a href="images/cubagallery-img-3.jpg"> 
     <img src="images/cubagallery-img-3.jpg" /></a> 

    <a href="images/cubagallery-img-4.jpg"></a> 
     <img src="images/cubagallery-img-4.jpg" /></a> 
</div> 

</div>

CSS:

.min-gallery 
{ 
width: 927px; 
height: 615px; 
border: solid 1px black; 
background-color: Black; 
background: url(../images/bg.jpg); 
margin: auto; 
margin-left: 232px; 
} 

.min-gallery .preview 
{ 
width: 852px; 
height: 493px; 
margin-top: 36px; 
margin-left: 36px; 
margin-right: 36px; 
position: relative; 
border: solid 2px black; 
overflow: hidden; 
background-color: White; 
} 

.min-gallery .preview img 
{ 
/* width: 795px;    height: 525px;*/ 
position: absolute; 
} 

.min-gallery .bottom 
{ 
width: 100%; 
height: 98px; 
color: Gray; 
font-family: Arial; 
font-size: 1em; 
font-weight: bold; 
overflow: hidden; 
} 

#top_bar { 
width: 100%; 
height: 145px; 
background: #000000; 
padding-bottom: 20px; 
} 

#top_inner { 
text-align: center; 
margin: 0 auto; 
width: 1000px; 
height: 144px; 
} 

.nav { 
margin: 0 auto; 
position: relative; 
padding-top: 100px; 
} 

ul.menu { 
list-style: none; 
margin: 0; 
float: left; 
background: #222; 
font-size: 1.2em; 
background: url(../images/topnav_bg.gif) repeat-x; 
} 
ul.menu li { 
float: left; 
margin: 0; 
position: relative; 
} 
ul.menu li a{ 
padding: 10px 18px; 
color: #fff; 
display: block; 
text-decoration: none; 
float: left; 
} 

ul.menu li a#left{ 
padding: 10px 5px; 
color: #fff; 
display: block; 
text-decoration: none; 
float: left; 
} 

ul.menu li a:hover { 
background: url(../images/topnav_hover.gif) no-repeat center top; 
} 

ul.menu li span { 
width: 11px; 
height: 35px; 
float: left; 
background: url(../images/subnav_btn.gif) no-repeat center top; 
} 

ul.menu li span.subhover { 
background-position: center bottom; cursor: pointer; 
} 

ul.menu li ul.submenu { 
list-style: none; 
position: absolute; 
left: 0; top: 35px; 
background: #333; 
margin: 0; padding: 0; 
display: none; 
float: left; 
width: 170px; 
-moz-border-radius-bottomleft: 5px; 
-moz-border-radius-bottomright: 5px; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
border: 1px solid #111; 
} 

ul.menu li ul.submenu li{ 
margin: 0; padding: 0; 
border-top: 1px solid #252525; 
border-bottom: 1px solid #444; 
clear: both; 
width: 170px; 
} 

html ul.menu li ul.submenu li a { 
float: left; 
width: 122px; 
padding-left: 30px; 
text-align: left; 
}

Cuando quito posición: absoluta de IMG .min-galería .preview, aparece el menú desplegable en la parte superior, que es como lo quiero, pero las imágenes dejan de cambiar y simplemente se quedan en una imagen.

¿Alguien consiguió una solución rápida? Lo siento por el pegado de todo el código pero no sé de qué otra manera puedo expresar mi punto de ustedes

, gracias

Fuente

2012-09-16 user1278496

¿Está configurando correctamente su índice z? El menú necesitará tener un índice Z más alto que la galería de imágenes y no tener una posición: estático (predeterminado) – Mark

establece el índice z más alto del menú desplegable.

.submenu { z-index: 999; }

reason "Un elemento con mayor orden de apilamiento está siempre delante de un elemento con un orden de apilamiento inferior".

Fuente

2012-09-16 06:57:19

Esa respuesta ya ha sido dada. – Mark

Gracias amigo que funcionó :) – user1278496

@Mark no sabía que estoy en el móvil, así que cuando comencé a atar no había ninguna respuesta –

Utilice un índice z para su menú desplegable.

.submenu { z-index: 1; }

Además, como nota al margen, si está utilizando propiedades prefijadas también se debe utilizar la propiedad de especificaciones, así que debería aparecer pasada después de los prefijos específicos del fabricante. Ejemplo:

-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px;

Cuando un proveedor admite la propiedad estándar, no tiene que cambiar su código.

Fuente

2012-09-16 06:54:39 Mark

Saludos amigo que funcionó. El valor del índice Z tenía que ser más alto, de lo contrario no funcionó, ¡pero gracias hombre! Salvavidas – user1278496

@ user1278496 no hay problema Me alegro de que funcionó! – Mark

El menú desplegable se corta o aparece detrás de div

Respuesta

Cuestiones relacionadas