100％高度在下拉菜單中不起作用

Question

現場檢查 - http://uposonghar.com/testsite/

當我向菜單添加更多項目時 - 菜單容器不會展開，項目會超出菜單。

Screenshot-

碼-

<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;
}

Answer 2

問題是，至少部分是由於你的#menu ul ，它應用了一個height: 38px到條形圖，但也被更深層次地應用於ul后代。

整個菜單欄似乎有點過於復雜，無法實現您想要實現的目標，並且可以以更簡單的方式完成。