如何在容器中放置絕對元素？

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

這可能是因爲它是向左浮動，因此確定位置的錨標籤，不是李元素。

將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; 
}