2014-12-22 3 views
0

두 번째 메뉴 (하위 메뉴)에 마우스를 올리면 세 번째 레벨 (하위 하위 메뉴)이 표시됩니다.HTML/CSS : 상위 메뉴가 아닌 부모 메뉴에 하위 메뉴 표시

하위 하위 메뉴는 상위 항목과 관련하여 나타납니다. 하지만 하위 메뉴 바로 옆에 나타나기를 원하므로 하위 메뉴 항목이 무엇이든 상관없이 항상 같은 위치에 있습니다. 따라서 하위 하위 메뉴의 첫 번째 항목 (예 : "두 번째 항목")은 항상 하위 메뉴의 첫 번째 항목과 동일한 높이에 있습니다 ("첫 번째")

다음은 실제 상태에 대한 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;} 

답변