100 % 높이 <a href="http://uposonghar.com/testsite/" rel="nofollow noreferrer">http://uposonghar.com/testsite/</a></p> <p>라이브 - 드롭 다운 메뉴에서

Question

확인 작동하지 않습니다.

는 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 자손에 적용됩니다.

전체 메뉴 표시 줄은 달성하려는 목표에 비해 너무 복잡해 보이며 훨씬 간단한 방법으로 수행 할 수 있습니다.