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 태그.