HTML/CSS：在父菜單旁邊顯示子菜單，而不是父項

Question

我有三級導航，第三級（子子菜單）在懸停在第二級（子菜單）上時顯示。

子子菜單相對於父項出現。但是我希望它只出現在子菜單旁邊，所以總是在同一個地方，無論哪個子菜單項目被徘徊。因此，下一級子菜單（如「二一」）的第一個項目總是在相同的高度子菜單（「第一」）

這裏是我的實際狀態的jsfiddle的第一項：http://jsfiddle.net/fc0rwbqu/

在此先感謝！

代碼：

<ul id="nav"> 
<li>Home</li> 
<li>Numbers 
    <ul> 
     <li>First 
      <ul> 
       <li>First-One</li> 
       <li>First-Two</li> 
       <li>First-Three</li> 
      </ul> 
     </li> 
     <li>Second 
      <ul> 
       <li>Second-One</li> 
       <li>Second-Two</li> 
       <li>Second-Three</li> 
      </ul> 
     </li> 
     <li>Third 
      <ul> 
       <li>Third-One</li> 
       <li>Third-Two</li> 
       <li>Third-Three</li> 
      </ul> 
     </li> 
    </ul> 
</li> 

CSS：

#nav { 
position: relative} 

#nav li a,#nav li { float:left; 
margin-left: 20px; 
background-color: #ddd;} 

#nav li { 
list-style:none; 
position:relative;} 

#nav li ul { 
display:none; 
position:absolute; 
left:0; width: 100px; 
top:90%; 
padding:0; 
margin:0;} 

#nav li:hover > ul { 
display:block;} 

#nav li ul li { 
float:none; 
height: 35px; 
min-width: 100px; 
line-height: 35px; 
border-right: 0; 
display:block;} 

#nav li ul li ul { 
display:none; margin: 0 0 0 10px; 
width: 100px; z-index:9999; 
float: left !important; overflow: display; 
background-color: #f06;} 

#nav li ul li:hover ul { 
left: 100px; 
top:0;} 

Answer 1

像這樣的事情？ http://jsfiddle.net/fc0rwbqu/1/ 已應用position: relative至ul標記。