Le menu déroulant se coupe ou apparaît derrière div

J'ai un menu déroulant qui apparaît derrière mon de transition d'image la galerie div. Ci-dessous est l'image de ce à quoi il ressemble et le HTML et le CSS.

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;
}

Quand j'enlève les position:absolute .min-galerie .aperçu img, le menu déroulant s'affiche sur le dessus qui est la façon dont je le veux, mais les images ne cessent de changer et de s'en tenir simplement sur une image.

Quelqu'un a une solution rapide? Désolé pour le collage de tout le code mais je ne sais pas comment je peux exprimer mon point de vue à vous les gars

Grâce

source d'informationauteur user1278496

21

définir le z-index supérieur du menu déroulant .
```
.submenu { z-index: 999; }
```
raison "d'Un élément avec le plus grand ordre de la pile est toujours en face d'un élément avec une baisse de la pile de l'ordre."
11

Utiliser un z-index de votre menu déroulant.
```
.submenu { z-index: 1; }
```
Aussi, comme une note de côté, si vous utilisez le préfixe propriétés, vous devez également utiliser la spécification de la propriété ainsi qui devrait apparaître en dernier après le vendeur préfixes spécifiques. Exemple:
```
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
```
Quand un vendeur prend en charge la norme de la propriété, vous n'avez pas à modifier votre code.

Vous devez vous connecter pour publier un commentaire.