CSS水平菜单包括。滑动子菜单

Question

我需要在父菜单后面有一个子菜单。查看图片(如果我使用绝对 div，左边是默认浏览器呈现，但我需要它，就像右边一样):

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

子菜单应该在父菜单的后面，以避免重叠。我尝试了一些 z-index 的东西，但它并没有真正起作用。就像 z-index:-1 可能会解决第一个子菜单的问题，但不能解决第二个子菜单的问题，对吧？

也许这个 fiddle 让它更清楚:

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-index 行为

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>