1

我有一个正在创建一个下拉菜单。所以我希望下拉菜单的 z-index 比菜单按钮少。两者都是绝对位置。菜单按钮的代码如下：

.menuBut
{
      /*background-image: -moz-linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%);
  background-image: -webkit-linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%);
  background-image: -o-linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%);
  background-image: linear-gradient(top, #7EA3D5 0%, #5C89C7 50%, #3966B0 51%, #3764AF 100%);*/
  background-color:rgb(255,253,202);
    -webkit-box-shadow:inset 2px -2px 2px 1px rgb(85,85,85);
    -moz-box-shadow:inset 2px -2px 2px 1px rgb(85,85,85);
    box-shadow:inset 2px 2px 2px 1px rgb(85,85,85);
    width: 28%;
    height: 48px;
    float:left;
    border:0px solid rgb(121,0,0);
    font-size:3em;
    font-weight:normal;
    color:rgb(46,49,146);
    border:1px solid rgb(85,85,85);
    z-index:300;

}

<div id = "servicesBut" style = "z-index:300;position:absolute;top:72%;left:36%;" class = "menuBut roundEdge" >Services</div>

在鼠标输入时创建下拉菜单的 javascript 代码如下：

var services = ["IT Services", "HR Services", "Marketing"];
function dropCourses()
{
    //alert("drop");
    if(menuNum == 2)
    {
        var divIndWrapper = document.createElement("div");
        divIndWrapper.setAttribute("class","indimenuWrapper roundEdge19 boxShadowMenuBut");
        divIndWrapper.setAttribute("style","display:none;position:absolute;top:100%;width:100%;background:rgb(200,100,0);");

        var arry = cours;
        var inrEle = "<ul style='list-style:none;width:100%;' align = 'left' class = 'indimenu'  >";            

        for(var i = 0; i< arry.length; i++)
        {
            //inrEle+="<li style='display:block;' ><p>sadfsdf</p></li>";
            inrEle+="<li style='display:block;width:100%;opacity:1;'><input  class = 'courseSub1' style='left:0;position:absolute;width:100%;border-top:1px solid rgb(200,0,0);background:rgb(200,100,0);color:white;' type='button' value='"+arry[i]+"' onclick='courseMenuClicked(this)'/></li><br />";

        }       
        inrEle+="</ul>";
        divIndWrapper.innerHTML = inrEle;   
        //alert("mouseEnterDrop"+inrEle);
        //alert("curdropele"+curdropEle.innerHTML);
        curdropEle = document.getElementById("menu2");
        curdropEle.appendChild(divIndWrapper);  
        curCreatedEle = divIndWrapper;
        divIndWrapper.style.display = "block";  
    }
    else if(menuNum == 5)
    {       
        //alert("menu5");
        var divIndWrapper = document.createElement("div");
        divIndWrapper.setAttribute("class","indimenuWrapper roundEdge19");
        divIndWrapper.setAttribute("style","border:1px solid rgb(85,85,85);border-top:none;overflow:hidden;z-index:-1;display:none;position:absolute;left:-1px;top:80%;width:100%;background:rgb(255,248,153);");

        var arry = services;
        var inrEle = "<ul style='z-index:-1;list-style:none;width:100%;' align = 'left' class = 'indimenu'  >";         
        //alert("menu5a");
        for(var i = 0; i< arry.length; i++)
        {
            //alert("menu5"+i);
            //inrEle+="<li style='display:block;' ><p>sadfsdf</p></li>";
            inrEle+="<li style='z-index:-1;display:block;width:100%;opacity:1;'><input  class = 'courseSub1' style='z-index:250;left:0;position:absolute;width:100%;border-top:1px solid rgb(200,0,0);background:rgb(255,248,153);color:rgb(46,49,146);font-size:2em;' type='button' value='"+arry[i]+"' onclick='galleryMenuClicked(this)'/><br /><br /></li>";

        }       
        inrEle+="</ul>";
        divIndWrapper.innerHTML = inrEle;   
        //alert("mouseEnterDrop"+inrEle);
        //alert("curdropele"+curdropEle.innerHTML);
        //alert("menu5b");
        curdropEle = document.getElementById("servicesBut");
        curdropEle.appendChild(divIndWrapper);  
        //alert("menu5c");
        curCreatedEle = divIndWrapper;
        divIndWrapper.style.display = "block";  
    }
}

无论我提供什么 z-index，下拉 div 仍然在菜单按钮上方。我希望菜单按钮位于下拉菜单上。我知道这不是真的，但这是因为下拉菜单是菜单按钮的子元素？

PS下拉部分在menuNum = 5下！！！

4

0 回答 0