CSS Horizontal Menu incl. sliding Submenu - css

Question

I need a submenu behind the parent menu. Check out the pic (left is the default browser rendering if I'm working with absolute divs, but I need it like on the right):
http://i67.tinypic.com/2nuqb89.jpg
The submenus should be behind the parent menu, to avoid an overlap. I tried some z-index stuff but it doesnt realy work. Like an z-index: -1 might fix the problem for the first submenu, but not for the second, right?
Maybe this fiddle makes it clearer:
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>Menu1
<ul class="mainmenu__sub mainmenu__sub--red">
<li>Submenu1
<ul class="mainmenu__sub mainmenu__sub--green">
<li>Subsubmenu1</li>
<li>Subsubmenu2</li>
<li>Subsubmenu3</li>
</ul>
</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
tldr; I need to reverse the child/parent z-index behavior

Answer 1

Add same color in instant nested li as per below code.
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>Menu1
<ul class="mainmenu__sub mainmenu__sub--red">
<li>Submenu1
<ul class="mainmenu__sub mainmenu__sub--green">
<li>Subsubmenu1</li>
<li>Subsubmenu2</li>
<li>Subsubmenu3</li>
</ul>
</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>