100% height doesn't work on dropdown menu - html

Question

Check live- http://uposonghar.com/testsite/
When i add more items to the menus - the menu container does not expand and items get outside the menu.
Screenshot-
Code-
<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 >Plan Benifit Payment Procedures
<ul>
<li >Communications</li>
<li >Manage Payments</li>
<li >Manage Pension Benefits</li>
<li >Reports</li>
</UL></li></div>
<div class="dropdown_3rd_lvl2"><li >Pension Services Procedures
<ul>
<li >Communications</li>
<li >Manage Group Benefits</li>
<li >Manage Payments</li>
<li >Manage Pension Benefits</li>
<li >Reports</li>
<li >Reports</li>
<li >Reports</li>
<li >Reports</li>
<li >Reports</li>
<li >Reports</li>
<li >Reports</li>
<li >Reports</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

Remove unnecessary 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

The problem is, at least partly, due to your #menu ul, which applies a height: 38px to the bar, but also gets applied to the ul descendant a few layers deeper.
The entire menu bar seems a bit too complex for what you are trying to achieve, and could be done in a much simpler way.