Javascript z索引不适用于两个元素的绝对定位

我有一个对话框，正在创建一个下拉菜单。所以我希望下拉菜单意味着U的z索引比菜单按钮少。两者都是绝对位置。菜单按钮的代码如下：

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

.menuBut
{
/*背景图像：-莫兹线性梯度（顶部，#7EA3D50%，#5C89C7 50%，#3966B0 51%，#3764AF 100%）；
背景图像：-webkit线性渐变（顶部，#7EA3D50%，#5C89C7 50%，#3966B0 51%，#3764AF 100%）；
背景图像：-o-线性梯度（顶部，#7EA3D50%，#5C89C7 50%，#3966B0 51%，#3764AF 100%）；
背景图像：线性渐变（顶部，#7EA3D50%，#5C89C7 50%，#3966B0 51%，#3764AF 100%）*/
背景色：rgb（255253202）；
-webkit盒阴影：插入2px-2px 2px 1px rgb（85,85,85）；
-moz盒阴影：插入2px-2px 2px 1px rgb（85,85,85）；
盒影：插入2PX2PX2PX1PXRGB（85,85,85）；
宽度：28%；
高度：48px；
浮动：左；
边框：0px实心rgb（121,0,0）；
字号：3em；
字体大小：正常；
颜色：rgb（46,49146）；
边框：1px实心rgb（85,85,85）；
z指数：300；
}
服务

创建鼠标输入下拉菜单的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";  
    }
}

var services=[“IT服务”、“人力资源服务”、“营销”]；
函数（）
{
//警报（“下降”）；
如果（menuNum==2）
{
var divIndWrapper=document.createElement（“div”）；
setAttribute（“类”，“indimenuWrapper roundEdge19框shadowmenubut”）；
setAttribute（“样式”，“显示：无；位置：绝对；顶部：100%；宽度：100%；背景：rgb（200100,0）；”；
var-arry=cours；
var inrEle=“
”；
对于（变量i=0；i
”；
}       
inrEle+=“
”；
divIndWrapper.innerHTML=inrEle；
//警报（“鼠标指针”+inrEle）；
//警报（“curdropele”+curdropele.innerHTML）；
curdropEle=document.getElementById（“menu2”）；
附肢儿童（占卜说唱者）；
curCreatedEle=divIndWrapper；
divIndWrapper.style.display=“block”；
}
else if（menuNum==5）
{       
//警报（“菜单5”）；
var divIndWrapper=document.createElement（“div”）；
setAttribute（“class”，“indimenuWrapper roundEdge19”）；
setAttribute（“样式”，“边框：1px实心rgb（85,85,85）；边框顶部：无；溢出：隐藏；z索引：-1；显示：无；位置：绝对；左侧：-1px；顶部：80%；宽度：100%；背景：rgb（255248153）；”；
var arry=服务；
var inrEle=“
”；
//警报（“menu5a”）；
对于（变量i=0；i

”；
}       
inrEle+=“
”；
divIndWrapper.innerHTML=inrEle；
//警报（“鼠标指针”+inrEle）；
//警报（“curdropele”+curdropele.innerHTML）；
//警报（“menu5b”）；
curdropEle=document.getElementById（“servicesBut”）；
附肢儿童（占卜说唱者）；
//警报（“菜单5c”）；
curCreatedEle=divIndWrapper；
divIndWrapper.style.display=“block”；
}
}

无论我提供了什么z索引，下拉div仍然位于菜单按钮上方。我希望菜单按钮位于下拉列表上方。我知道这不是真的，但这是因为下拉菜单是菜单按钮的子元素吗

---

另外，下拉部分在菜单项下=5

请提供JSFIDLE示例，以便我们可以研究它。Pfa是jsfiddle链接。然而，我不知道y，但drop down在JSFIDLE中不起作用