下拉菜单隐藏在images / js幻灯片后面

时间:2013-07-04 05:41:28

标签: html menu z-index slideshow

我有一个愚蠢的问题,一个菜单隐藏在ASP.net上的js幻灯片后面。基本上我喜欢菜单可以显示所有选项,但我已经尝试了很多解决方案,比如z-index,position:relative,很遗憾没什么似乎工作,我不知道为什么......

你知道为什么会这样吗?

这是我在html文件中的代码

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

我的幻灯片CSS

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

我的菜单CSS代码

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

任何帮助将不胜感激

0 个答案:

没有答案