html - 100% 高度在下拉菜单中不起作用

Question

实时查看- http://uposonghar.com/testsite/

当我向菜单添加更多元素时 - 菜单容器不会展开并且元素会超出菜单范围。

截图-

代码-

<LI id=navPreretire><A title="Pre Retirement Procedures"  href="http://pencproc/" target=_blank><SPAN class=singleLine>Pre Retirement Procedures</SPAN> </A>

        <!--Mega menu drop-down part1, the div have to stay like that-->
        <div class="dropdown">
        <!--until here-->
            <Ul>
                <div class="dropdown_3rd_lvl1"><li ><a href="#">Plan Benifit Payment Procedures</a>
                    <ul>
                        <li ><a href="#">Communications</a></li>
                        <li ><a href="#">Manage Payments</a></li>
                        <li ><a href="#">Manage Pension Benefits</a></li>
                        <li ><a href="#">Reports</a></li>
                    </UL></li></div>

                <div class="dropdown_3rd_lvl2"><li ><a href="#">Pension Services Procedures</a>
                    <ul>
                        <li ><a href="#">Communications</a></li>
                        <li ><a href="#">Manage Group Benefits</a></li>
                        <li ><a href="#">Manage Payments</a></li>
                        <li ><a href="#">Manage Pension Benefits</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                        <li ><a href="#">Reports</a></li>
                    </UL></li></div>

            </ul>
       <!--Menu ends-->
       </div>
       <!--Menu ends-->
    </LI>

CSS-

.dropdown{
display: none;
BACKGROUND-COLOR: #886d53;
clear: both; 
}

.dropdown>ul>li{
clear: both;   
float: left;    
}

#menu li:hover .dropdown{
position: absolute;
display: block;
height:100%;
min-width: 430px;
margin: 38px auto; 
padding-top: 5px;    
}

.dropdown ul li{
clear: both;    
}

#menu .dropdown ul li:hover{
clear: both;
}

Answer 1

删除不必要的height，position:absolute。

#menu li:hover .dropdown {
    /*height: 200px;*/
}
#menu ul ul {
    height: auto;
}
.dropdown_3rd_lvl1 {
    /*position: absolute;*/
    /*left: 0*/
    /*margin-left: -30px;*/
    float: left;
}
.dropdown_3rd_lvl2 {
    /*position: absolute;*/
    /*margin-left: 170px;*/
    float: left;
}