Z-index doesn't work in Sub Navigation - html

Question

I have a problem where my z-indexes just won't kick in and I don't really get why.
I am not able to reposition the elements in the DOM, I need a purely CSS-based solution without any greater hacks
I have the following navigation:
<nav>
<div class="wrapper">
<ul>
<li>Test</li>
<li>Test
<ul>
<li>Sub test</li>
<li>Sub test</li>
</ul>
</li>
</ul>
</div>
</nav>
http://jsfiddle.net/S3XBD/1/
I packed it in a fiddle with the CSS to demonstrate my problem
my target is to get the blue box (Sub-Navigation) under the green box (Top level Navigation) in the exact same manner as demonstrated in the fiddle
Is there any way to fix my z-indexes or can someone point me to the mistake?
Thanks for your help

Answer 1

Just remove the z-index form the .wrapper element and change the z-index of the second ul to -1
nav .wrapper {
width: 100%;
max-width: 400px;
background: green;
margin: 0px auto;
position: relative;
}
...
nav ul ul {
display: none;
position: absolute;
top: 50%;
left: 0;
width: 100%;
background: blue;
z-index: -1;
}
http://jsfiddle.net/S3XBD/2/

Answer 2

I have updated your csss and removed hover as this is easy to fix: but the issue I believe you had was only in your positioning
nav {
width: 100%;
background: red;
}
nav .wrapper {
width: 100%;
max-width: 400px;
background: green;
margin: 0px auto;
position: relative;
z-index: 50 ;
}
nav ul {
list-style: none;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: blue;
z-index: 100 !important;
}
nav ul li {
display: inline-block;
}
nav ul li ul {
display: block;
}
Just one thing more: User firebug to find out what it current style and you can modify it there on runtime. It also supports hover