jquery:导航栏：使用z索引对子菜单列表进行堆栈排序

如何将子菜单1（蓝色背景）堆叠在子菜单1（红色背景）下？我尝试过使用z-index，但它不起作用。在下面的JSFIDLE中，子菜单U1堆叠在子菜单1的顶部

html:

---

您必须使用

position:absolute

和

z-index

在悬停事件上尝试以下代码：

$(this).children("ul").animate({marginLeft:"50px"}).css({"position":"absolute", "z-index":"-1"});

在顶部导航中隐藏其他元素

替换此：$（“#子菜单1，#子菜单2”）.children（）.hide（）

With：$（“#子菜单1，#子菜单2”）.children（“ul”）.hide（）在脚本中

祝你好运
 但是当我修改了html，在导航栏中只显示home、about和contact的链接时。注册公司和购买公司未显示。我的代码在。有什么问题吗？@vaanipala，我已经更新了这个问题的答案。看一看。
 /* CSS Document */
html body{
    padding:0;
    margin:0 auto;
}

.contentwrapper{
    width:900px;
    margin-left:auto;
    margin-right:auto;
    height: auto !important;
}
#header{
/*  height:20%;
*/  width:900px;
    height:280px;
    /*background-color:#009999;*/
    background-image:url('../images/bg_image.png');
    background-repeat:no-repeat;
    float:left;
    text-align:center;
}
#logo{
margin-top:15%;
float:left;
width:30%;
}
#company_name{
float:left;
font:"Times New Roman", Times, serif;
font-size:36px;
margin-top:20%;
}
#navbar{
/*  height:10%;
*/  width:900px;
    color:#ffffff;
    float:left;
    margin-top:2%;
    padding:0;
    z-index:0;
    position:relative;

}
#menu{
    list-style-type:none;
    margin:0;
    padding:0;
    position:absolute;
}

#menu li{
float:left;
    display:block;
    width:120px;
    text-align:center;
    background-color:#FF0000;
    padding:0;
    margin:0;

}
/*#menu li ul ul li*/
#subsubmenu1 ul li
{position:relative;
left:0;
top:-30px;
background:#3399CC;
}

#leftcolumn{
    float:left;
    width:20%;
    background-color:#FF9900;
}
#contentcolumn{
    float:left;
    width:60%;
    background-color:#ffffff;
}
#rightcolumn{
    float:left;
    width:20%;
    background-color:#FF9900;
}
#footer{
/*  height:10%;
*/  width:inherit;
    padding-top:4px;
    background-color:#009999;
    text-align:center;
}

$(this).children("ul").animate({marginLeft:"50px"}).css({"position":"absolute", "z-index":"-1"});