메가 드롭 다운 난 그냥 다음 링크에서처럼 메가 드롭 다운 메뉴를 만들려고 해요

Question

메뉴 위치 문제 :이 바이올린을 만든하지만 일이 잘 때문에 위치의 가고 있지 http://i48.tinypic.com/2ln97ip.png

두 번째 UL의 테두리가 확인되지 :( http://jsfiddle.net/H8FVE/16/

<ul id="firstUl"> 
    <li><a>mainSimple</a></li> 
    <li> 
     <a>MainMenu</a> 
     <ul id="secondUl"> 
      <li> 
       <a>SecondLevel1</a> 
       <ul id="lastLevel"> 
        <li> 
         <a>LastLevelX</a> 
        </li> 
        <li> 
         <a>LastLevelY</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a>SecondLevel2</a> 
       <ul id="lastLevel"> 
        <li> 
         <a>LastLevel</a> 
        </li> 
        <li> 
         <a>LastLevel</a> 
        </li> 
        <li> 
         <a>LastLevel</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    </ul> 


#firstUl{height:42px; position:relative; background:#ccc;} 

#firstUl li{ float:left; border:1px solid #fff; padding:10px; border:1px solid red;} 

#secondUl{display:none; background:#fafafa; } 


#secondUl li{ 
float:left; 
display:block; 
border:1px solid #eaeaea; 
} 

#lastLevel{ 
display:none; 
} 


#firstUl li:hover> #secondUl{ 
border:1px solid red; 
display:block; 
position:absolute; 
top:100%; 

} 

#firstUl li #secondUl li:hover> #lastLevel{ 
display:block; 
    position:absolute; 
    top:100%; 
    left:0; 
} 


#firstUl li #secondUl li #lastLevel li{ 
float:none; 
} 

이 PLS와 함께 누군가가 나를 도울 수

Answer 1

는 위치로 #secondUl 리튬 설정을 시도해보십시오. 상대를 아이의 (UL)의 위치 (을)를 따라 수 있도록 그것은 :

#secondUl li { 
    ... 
    position: relative; 
}