컨테이너에 절대 요소를 배치하는 방법은 무엇입니까?

Question

메인 메뉴의 il 상대 위치와 내부에 ul을 절대 위치로 지정하여 요소 아래에 하위 메뉴가있는 메뉴를 만들려고합니다. 하위 메뉴가 ul에 대한 내용을 부모가 아닌 컨테이너로 취급하는 이유는 무엇입니까? li?

되는 HTML :

<nav> 
    <ul> 
     <li><a href="#">Menu Item 1</a></li> 
     <li><a href="#">Menu Item 2</a> 
      <ul> 
       <li><a href="#">Submenu Item 1</a></li> 
       <li><a href="#">Submenu Item 2</a></li> 
       <li><a href="#">Submenu Item 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu Item 3</a></li> 
     <li><a href="#">Menu Item 4</a></li> 
     <li><a href="#">Menu Item 5</a></li> 
    </ul> 
</nav>​ 

는 CSS :

nav a { 
    float: left; 
    padding: 10px; 
    border: solid 1px #C0C0C0; 
    margin-left: -1px; 
} 

nav li { 
    position: relative; 
} 

nav li ul { 
    position: absolute; 
} 

http://jsfiddle.net/6pgHa/

Answer 1

가 왼쪽 따라서 위치를 정의 떠내려 앵커 태그이기 때문에 그것은있을 수 있습니다, li 요소가 아닙니다.

nav a 선택기를 nav li으로 변경하면 수정됩니다. li 요소는 현재 코드에서 어떤 위치를 차지하지 않습니다.

Answer 2

나는 메뉴가 내가 생각하는 방법 당신이 원하는 일을 확인하기 위해 바이올린을 업데이트했습니다 단지 호기심 http://jsfiddle.net/6pgHa/3/

nav { 
width: 600px; 
margin: 50px auto 0; 
} 

nav > ul li { 
float: left; 
position: relative; 
} 

nav > ul li a { 
float: left; 
padding: 10px; 
border: solid 1px #C0C0C0; 
display:inline-block; 
} 


nav > ul li ul { 
position: absolute; 
top:50px; 
left:-9999px; 
} 

nav > ul li:hover ul { 
left:0; 
}