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