CSS水平菜單，滑動子菜單

Question

我需要父菜單後面的子菜單。退房的照片（左爲默認瀏覽器的渲染，如果我絕對div的工作，但我需要它如右圖）：

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

子菜單應該是父菜單後面，以避免重疊。我嘗試了一些z-index的東西，但它並沒有真正的工作。像z-index一樣：-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>