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後裔。

整個菜單欄看起來有點太複雜，無法實現，而且可以用更簡單的方式完成。