Html 溢出隐藏和位置绝对菜单

我知道许多其他人也面临这些问题，而且有解决办法。但我发现没有一个问题与我相似，所有的问题都错过了父母的

位置：relative

。但是我对父菜单使用了

position:relative

和

overflow:hidden

，对子菜单使用了

position:absolute

，但是父菜单的overflow hidden隐藏了我菜单中的子菜单

HTML

移除菜单容器中隐藏的溢出将显示子菜单，但菜单容器不包含该菜单

---

请有人帮我找出我做错了什么，这样子菜单也会显示出来。提前感谢您的时间和努力。

尝试删除溢出：隐藏在li和#菜单容器中。将此代码添加到#菜单容器

#menu-container:after{
    content:'';
    display:block;
    clear:both;
}

#menu-container{
    margin: 60px;
    margin-bottom: -20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* Background color and gradients */
    background-color: white;/*
    background-color: -moz-linear-gradient(top, #0272a7, #013953);
    background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
    /* Borders */
    border: 1px solid #002232;
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
    padding: 0;
    z-index:20;
    position: relative;
    overflow: hidden;
}

#menu{
    list-style:none;
    vertical-align: middle;
    /* Rounded Corners */
    color: #2a6496;
    position: relative;
    margin: 0;
    padding:0;
    margin-left: 30px;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    overflow: hidden;
    margin-right:30px;
    border:none;
    padding: 10px 15px 10px 15px;
}

#menu li:hover {
    /* Background color and gradients */
    /*
    background: linear-gradient(top, #F4F4F4, #e1e1e1);
    background: -moz-linear-gradient(top, #F4F4F4, #e1e1e1);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#e1e1e1));
    */
    background: #428bca;
    /* Rounded corners */

    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;

}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #2a6496;
    display:block;
    outline:0;
    text-decoration:none;
}

#menu li:hover > a {
    color: white;
}
#menu li .drop {
    padding-right:21px;
    background:url("../../images/drop.png") no-repeat right 6px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

#menu li ul{
    margin:4px auto;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    /*padding:10px 5px 10px 5px;*/
    padding: 0;
    border:1px solid #428bca;
    border-top:none;
    z-index: 999;
    width: 200px;
    /* Gradient background */
    background:white;
    /*background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

    overflow-x: hidden;
    */
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}

#menu li ul li{
    padding: 10px 10px 10px 10px;
    position: relative;
    z-index: 999;
    width: 100%;
    text-align: left;
}
#menu li ul li:hover{
    background: #13967e;
}
#menu li ul a{
    color: #2a6496;
}

#menu li ul li:hover a{
    color: white;
}
#menu li .input, #menu li .input:hover{
    background: white;
}

#menu li:hover ul {
    left: -1px;
    top:auto;
}

#menu-container:after{
    content:'';
    display:block;
    clear:both;
}