CSS 수평 메뉴 포함 sliding 서브 메뉴

Question

부모 메뉴 뒤에 서브 메뉴가 필요합니다. (왼쪽 나는 절대 div를 함께 일하고 있어요 경우 기본 렌더링 브라우저,하지만 난 오른쪽처럼 필요)이 그림을 체크 아웃 :

http://i67.tinypic.com/2nuqb89.jpg

하위 메뉴를 방지하기 위해, 부모 메뉴 뒤에해야한다 오버랩. 나는 z- 색인 물건을 시도했지만 진짜 일을하지 않습니다. Z- 인덱스와 마찬가지로 : -1은 첫 번째 하위 메뉴의 문제를 해결할 수 있지만 두 번째 하위 문제는 해결하지 못할 수 있습니다.

아마이 바이올린을 만드는 것이 명확 :

html, body { 
 
    height: 100%; 
 
    background: darkred; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul, li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
a { 
 
    display: block; 
 
    color: darkred; 
 
    text-decoration: none; 
 
    padding: 1rem 2rem; 
 
} 
 

 
.mainmenu { 
 
    width: 10rem; 
 
    background: white; 
 
    position: fixed; 
 
    height: 100%; 
 
    z-index: 99; 
 
} 
 
.mainmenu li:hover > ul { 
 
    left: 100%; 
 
} 
 
.mainmenu__sub { 
 
    width: 10rem; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: -2; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
.mainmenu__sub--red { 
 
    background: red; 
 
} 
 
.mainmenu__sub--green { 
 
    background: green; 
 
}

<ul class="mainmenu"> 
 
    <li><a href="javascript:;">Menu1</a> 
 
    <ul class="mainmenu__sub mainmenu__sub--red"> 
 
     <li><a href="javascript:;">Submenu1</a> 
 
     <ul class="mainmenu__sub mainmenu__sub--green"> 
 
      <li><a href="javascript:;">Subsubmenu1</a></li> 
 
      <li><a href="javascript:;">Subsubmenu2</a></li> 
 
      <li><a href="javascript:;">Subsubmenu3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="javascript:;">Submenu2</a></li> 
 
     <li><a href="javascript:;">Submenu3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="javascript:;">Menu2</a></li> 
 
    <li><a href="javascript:;">Menu3</a></li> 
 
    <li><a href="javascript:;">Menu4</a></li> 
 
</ul>

tldr; 하위/상위 Z- 인덱스 동작을 뒤집을 필요가 있습니다.

Answer 1

인스턴트 중첩 li에 동일한 코드를 아래 코드와 같이 추가하십시오.

html, body { 
 
    height: 100%; 
 
    background: darkred; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul, li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
a { 
 
    display: block; 
 
    color: darkred; 
 
    text-decoration: none; 
 
    padding: 1rem 2rem; 
 
} 
 

 
.mainmenu { 
 
    width: 10rem; 
 
    background: white; 
 
    position: fixed; 
 
    height: 100%; 
 
    z-index: 99; 
 
} 
 

 
.mainmenu > li{ 
 
    background: white; 
 
} 
 
.mainmenu li:hover > ul { 
 
    left: 100%; 
 
} 
 
.mainmenu__sub { 
 
    width: 10rem; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: -2; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
.mainmenu__sub--red, .mainmenu__sub--red > li { 
 
    background: red; 
 
} 
 
.mainmenu__sub--green, .mainmenu__sub--green > li { 
 
    background: green; 
 
}

<ul class="mainmenu"> 
 
    <li><a href="javascript:;">Menu1</a> 
 
    <ul class="mainmenu__sub mainmenu__sub--red"> 
 
     <li><a href="javascript:;">Submenu1</a> 
 
     <ul class="mainmenu__sub mainmenu__sub--green"> 
 
      <li><a href="javascript:;">Subsubmenu1</a></li> 
 
      <li><a href="javascript:;">Subsubmenu2</a></li> 
 
      <li><a href="javascript:;">Subsubmenu3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="javascript:;">Submenu2</a></li> 
 
     <li><a href="javascript:;">Submenu3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="javascript:;">Menu2</a></li> 
 
    <li><a href="javascript:;">Menu3</a></li> 
 
    <li><a href="javascript:;">Menu4</a></li> 
 
</ul>