Drop Down Menu Cuts off or Appears Behind Div
I Have a Drop Down Menu Which Is Appearing Behind My Image Transition Gallery Div. Below Is the Image of What It Looks Like and the Html and Css for It. Html...
I have a drop down menu which is appearing behind my image transition gallery div. Below is the image of what it looks like and the HTML and CSS for it.
HTML:
<body>
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <a href=""><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;
}
When I remove position:absolute from .min-gallery .preview img, the drop down menu appears on top which is how I want it but the images do stop changing and just stick on one image.
Anyone got a quick fix? Sorry about the pasting of all the code but I dont know how else I can express my point to you guys
Thanks
4 Answers
set the higher z-index of drop down menu .
.submenu { z-index: 999; }
reason "An element with greater stack order is always in front of an element with a lower stack order."
Use a z-index for your drop down menu.
.submenu { z-index: 1; }
Also, as a side note, if you are using prefixed properties you should also use the spec property as well which should appear last after the vendor specific prefixes. Example:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
When a vendor supports the standard property, you don't have to change your code.
Find the overflow property in the parent or in the child element and remove the overflow property.
You are welcome
Use
.submenu { z-index: 1;position :relative}
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
