13

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.

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

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

1
  • Are you setting your z-index correctly? The menu will need to have a z-index higher then the image gallery and not have a position:static (default)
    – Mark
    Sep 16, 2012 at 6:53

4 Answers 4

20

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

2
  • @Mark i didn't know that i am on mobile so when i was started tying there were not any answer Sep 16, 2012 at 7:02
  • Great answer - helped me alot!
    – smac2020
    Nov 15, 2017 at 23:06
11

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.

1
  • Cheers mate that worked. The value of z-index needed to be higher else it didnt work but thanks man! Life saver Sep 16, 2012 at 7:02
5

Find the overflow property in the parent or in the child element and remove the overflow property.

You are welcome

0

Use

.submenu { z-index: 1;position :relative}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.