중첩 된 ul 요소를 상위 부모 요소 대신 측면 및 측면 다이브 요소에 상대적으로 배치하는 방법

Question

중첩 된 다중 레벨 UL 요소가 포함 된 DIV 요소가 있습니다. 모든 UL 요소 절대 위치 및 DIV 요소는 상대적으로 배치됩니다.

이제 모든 하위 UL 요소를 부모 요소가 아닌 DIV 요소에 상대적으로 배치하려고합니다.

<div id="menu-container"> 
<ul> 
<li><a href="#">Level 1.1</a> 
    <ul> 
    <li><a href="#">Level 1.1.1</a> 
     <ul> 
     <li><a href="#">Level 1.1.1.1</a></li> 
     <li><a href="#">Level 1.1.1.2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Level 1.1.2</a></li> 
    </ul> 
</li> 
<li><a href="#">Level 1.2</a> 
    <ul> 
    <li><a href="#">Level 1.2.1</a></li> 
    <li><a href="#">Level 1.2.2</a> 
     <ul> 
     <li><a href="#">Level 1.2.2.1</a> 
      <ul> 
      <li><a href="#">Level 1.2.2.1.1</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Level 1.2.2.2</a></li> 
     <li><a href="#">Level 1.2.2.3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Level 1.2.3</a></li> 
    </ul> 
</li> 
<li><a href="#">Level 1.3</a> 
    <ul> 
    <li><a href="#">Level 1.3.1</a> 
     <ul> 
     <li><a href="#">Level 1.3.1.1</a></li> 
     <li><a href="#">Level 1.3.1.2</a></li> 
     </ul> 
    </li> 
    </ul> 
</li> 
<li><a href="#">Level 1.4</a> 
    <ul> 
    <li><a href="#">Level 1.4.1</a></li> 
    <li><a href="#">Level 1.4.2</a></li> 
    <li><a href="#">Level 1.4.3</a></li> 
    <li><a href="#">Level 1.4.4</a></li> 
    <li><a href="#">Level 1.4.5</a></li> 
    </ul> 
</li> 

Answer 1

하는 당신은, 아이들부터 UL 요소는 항상 위치의 일종을 가지고 가장 가까운 부모의를 찾습니다 할 수 없습니다 : 여기

은 예제 코드 UL은 직위가있는 이전 UL의 자녀입니다.

당신이 영감을 줄 수있는 뭔가가 있다면 순수한 CSS (내 의견으로는 조금 지나치게 과장된 것입니다)에있는 메뉴로 가고 싶다면 그 사람을 확인할 수 있습니다. 직장 : http://cssplay.co.uk/