CSS에서 하위 하위 수직 메뉴 구성

Question

나는 표절했습니다 ... < 기침> ... some code 빌려준 웹 페이지에 대한 수직 메뉴를 만들 수 있습니다. 나는 너무 많은 문제없이 내 취향에 맞게 룩앤필을 만들었습니다. 내가 가지고있는 문제는 하위 서브 메뉴 (세 번째 계층 메뉴)가 나타나지 않는 것 같습니다. 내가 달성 할 수 있었던 가장 가까운 것은 하위 메뉴의 가장 작은 부분을 하위 메뉴 테두리의 오른쪽에 표시하는 것입니다. #nav li:hover ul.subs { CSS 코드를 다시 사용하여 그럴 수는 없습니다. 내 문제는 #nav 행을 코드화하는 방법과 하위 서브 메뉴를 수행하기 위해 코드의 어느 부분을 복제해야 하는지를 완전히 이해하지 못했다는 것입니다.

Here is a link to my jfiddle 코드입니다.

그래서, 짧은에, 내가 무엇을 찾고있어입니다 :

• 서브 서브 블록 형식의 #nav 코드의 첫 번째 줄
• 다른 코드 블록은이 일을하는 데 필요한 무엇
수행 GT 기호 선을 무엇
• ... 예 : #nav li: hover > a { 실제로 함께 작동합니까 어떻게
• (CSS 코드가 아닌 CSS3 부분) 할 수있다
• 다른 맛있는 가벼운 음식 도움이 되길.

나는 this과 같은 다른 게시물을 보았지만, 필요한 것을 가지고 있지 않았거나, 최소한, 어떻게 작동하는지, 왜 필요한지에 관해 아주 좋은 설명을 제공하지 못했습니다. 그것을 작동하게합니다. 이 코드가 나온 페이지는 어떻게 작동하는지에 대한 만족스러운 설명이 없습니다. 사람들은 방금 하위 메뉴를 만들기 위해 몇 가지 추가 코드를 추가한다고 말했고 ...별로 도움이되지 않습니다. 또한, 이것은 순수한 CSS3 수직 메뉴에서의 시도입니다 ... jQuery는 적용 할 필요가 없습니다. 미리 감사드립니다.

Answer 1

업데이트 코드 :

#nav,#nav ul { 
 
    background-color: #8899AA; 
 
    list-style: none outside none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#nav { 
 
    display: block; 
 
    padding: 5px; 
 
    position: relative; 
 
    width: 112px; 
 
    -moz-perspective: 200px; 
 
    -ms-perspective: 200px; 
 
    -webkit-perspective: 200px; 
 
    -o-perspective: 200px; 
 
    perspective: 200px; 
 
} 
 
#nav ul { 
 
    left: -9999px; 
 
    opacity:0; 
 
    padding: 5px; 
 
    position: absolute; 
 
    top: -9999px; 
 

 
    -moz-transform: rotateY(70deg); 
 
    -ms-transform: rotateY(70deg); 
 
    -o-transform: rotateY(70deg); 
 
    -webkit-transform: rotateY(70deg); 
 
    transform: rotateY(70deg); 
 
    
 
    -moz-transform-origin: 0 0; 
 
    -ms-transform-origin: 0 0; 
 
    -o-transform-origin: 0 0; 
 
    -webkit-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    
 
    -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear; 
 
    -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear; 
 
    -o-transition: -o-transform 0.3s linear, opacity 0.3s linear; 
 
    -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear; 
 
    transition: transform 0.3s linear, opacity 0.3s linear; 
 
} 
 
#nav li { 
 
    background-color: #FFFFFF; 
 
    position: relative; 
 
} 
 
#nav > li { 
 
    -moz-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 
#nav li a { 
 
    background-color: #AABBCC; 
 
    border-color: #DDDDDD #555555 #555555 #DDDDDD; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    color: #000000; 
 
    display: block; 
 
    font-size: 15px; 
 
    padding: 8px 10px 8px 5px; 
 
    text-decoration: none; 
 
    width:95px; 
 
    
 
    -moz-transition: all 0.2s linear; 
 
    -ms-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    transition: all 0.2s linear; 
 
} 
 
#nav li:hover > a { 
 
    background-color: #8899AA; 
 
    border-color: #8899AA; 
 
    color: #FFFFFF; 
 
} 
 
#nav li:hover > ul.subs { 
 
    left: 112px; 
 
    opacity:1; 
 
    top: 0; 
 
    
 
    -moz-transition-delay: 0.3s; 
 
    -ms-transition-delay: 0.3s; 
 
    -o-transition-delay: 0.3s; 
 
    -webkit-transition-delay: 0.3s; 
 
    transition-delay: 0.3s; 
 
    
 
    -moz-transform: rotateY(0deg); 
 
    -ms-transform: rotateY(0deg); 
 
    -o-transform: rotateY(0deg); 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
} 
 
#nav ul li { 
 
    width: 100%; 
 
}

<div class="container"> 
 
\t <ul id="nav"> 
 
\t \t <li><a href="#">Home</a></li> 
 
\t \t <li><a href="#">Menu 1</a> 
 
\t \t \t <ul class="subs"> 
 
\t \t \t \t <li><a href="#">Submenu 1-1</a> 
 
        <ul class="subs"> 
 
         <li><a href="#">Submenu 1-1-1</a></li> 
 
         <li><a href="#">Submenu 1-1-2</a></li> 
 
         <li><a href="#">Submenu 1-1-3</a></li> 
 
         <li><a href="#">Submenu 1-1-4</a></li> 
 
        </ul> 
 
       </li> 
 
\t \t \t \t <li><a href="#">Submenu 1-2</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 1-3</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 1-4</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 1-5</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#">Menu 2</a> 
 
\t \t \t <ul class="subs"> 
 
\t \t \t \t <li><a href="#">Submenu 2-1</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 2-2</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 2-3</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 2-4</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 2-5</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 2-6</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 2-7</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 2-8</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#">Menu 3</a> 
 
\t \t \t <ul class="subs"> 
 
\t \t \t \t <li><a href="#">Submenu 3-1</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 3-2</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 3-3</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 3-4</a></li> 
 
\t \t \t \t <li><a href="#">Submenu 3-5</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#">Menu 4</a></li> 
 
\t \t <li><a href="#">Menu 5</a></li> 
 
\t \t <li><a href="#">Menu 6</a></li> 
 
\t </ul> 
 
</div>

내가 무슨 짓을 :

• [HTML] 이동 당신의 깊은 <ul> 내부의 <li> 부모 (내 예 참조)
• [CSS].subs1을 제거하고 .subs을 대신 사용하십시오. 그러면 Google의 모든 하위 항목 (하위 (하위) (...)을 위협 할 수 있습니다.))) .subs1 CSS
• [CSS] 제거 같은 방식으로 전체 메뉴
• 그들의 부모의 왼쪽에있는대로 [CSS]) (#nav ul { overflow: hidden; }이 숨겨 우리의 하위 메뉴를 방지하기 위해 제거
• 로 입지 않도록 left: 112px로 소자
• [CSS] 변경 left: 114px 떠오르게 때 [CSS]#nav li:hover > ul.subs {}로 변경 #nav li:hover ul.subs {} 선택기는, 첫 번째 서브 메뉴를 표시합니다 요소와 하위 메뉴 사이의 속도 질문에 대한

(이 공간에 올려 놓으면, 당신은 더이상은 다음 하위 메뉴가 숨겨져있는 요소를 유혹하는 것)에 > 선택 만 직접 아이들을 대상으로. 예 :

<ul id="nav"> 
    <li>    <!-- #nav li [OR] #nav > li --> 
     <ul> 
      <li></li> <!-- #nav li [ONLY] --> 
     </ul> 
    </li> 
</ul>