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>