Drop Down Menu hides behind images/js slideshow

I’m having a silly problem with a menu that hides behind a js slideshow on ASP.net. Basically I’d like that the menu could show all its options but I’ve tried a lot of solutions like z-index, position: relative and unfortunately nothing seems to work and I don’t know why…

Do you have any idea why is that happening ?

This is the code that I have in my html file

#imageSlideshowHolder{

        width: 915px;
        height: 255px;
        background-color:#000;
        border:3px solid #317082;
        position:relative;
            top: 0px;
            left: 0px;
            z-index: 1;
    }
.imageInGallery{
    width:915px;
    height:255px;
    background-color:#000;
    left:0px;
    top:0px;
    position:absolute;

 }

 #imageSlideshowHolder img{
        position:relative;
        top: 4px;
        left: 3px;
        height: 246px;
        width: 907px;
        right: 5px;
        z-index: 2;
    }

My CSS for the slideshow

body
{
}
#imageSlideshowHolder{
width:907px;
height:246px;
background-color:#000;
border:3px solid #317082;
position:relative;

}
.imageInGallery{
width:915px;
height:255px;
background-color:#000;

left:0px;
top:0px;
position:absolute;
}

And my CSS code for the menu

div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
height: 38px;
}

div.menu
{
padding: 4px 0px 4px 8px;
z-index: 1000;
}

div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
z-index: 1000;
}

div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}

div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}

div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}

An image that shows my problem. Inside the red box there should be another option but is completely hidden by the holder and the slideshow

Any help would be appreciated

Hi, adrian87, welcome to the forums.

Is this page on a server? If so, would you mind posting a link to the site? It would be better if we could see all of the code working together.


div.menu
{
padding: 4px 0px 4px 8px;
z-index: 1000;
[B]position:relative;[/B]
}

you cant apply z-index w/o some sort of positioning context: relative, absolute , or fixed.
hope that helps.

@ronpat Thanks man ! I haven’t host the website because is a project that I’m currently developing but thank God I got a solution

@dresden_phoenix dude you’re a genius ! thank you so much ! I applied your solution in my menu code and now it works perfectly. I only added position:relative; both in my div.menu and div.menu ul and runs without any problem. Here’s the final CSS code for the menu and my html file

div.menu
{
    padding: 4px 0px 4px 8px;
    position: relative;
    z-index: 1000;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    position: relative;
    z-index: 1000;
}

and my original html code


#imageSlideshowHolder{
 
        width: 915px;
        height: 255px;
        background-color:#000;
        border:3px solid #317082;
        position:relative;
            top: 0px;
            left: 0px;
            z-index: 1;
    }
.imageInGallery{        
    width:915px;
    height:255px;
    background-color:#000;
    left:0px;
    top:0px;
    position:absolute; 
 
 }
 
 #imageSlideshowHolder img{
        position:relative;
        top: 4px;
        left: 3px;
        height: 246px;
        width: 907px;
        right: 5px;
        z-index: 2;
    }

result:

So basically the menu z-index should be higher than the slideshow holder z-index and also the menu must have a positioning context (in my case relative)

Again, thank you so much guys !!! :smiley: