Z-index in nested UL - html

Question

I have a problem with z-index in a CSS-Menu. I built the menu with nested ul Tags.
Clearly, the first ul is the first level in the menu-hierarchy. As a background-property of this first ul, I set a gradient and a box-shadow, all with CSS of course.
The second ul (the nested one) is the second level in the menu-hierarchy. I gave it a gray background-color.
Unfortunately, the second ul overlays the first ul. I tried to play around with z-index, but I can't get it to work. I'd like to get the shadow of the first ul over the nested ul.
Here is the code so that you may reproduce it:
CSS:
ul.menu {
/* Gradient: */
background: #444;
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
background: -moz-linear-gradient(top, #999, #777);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#777');
height: 25px;
/* Box-Shadow: */
-moz-box-shadow: 1px 3px 3px #888;
-webkit-box-shadow: 1px 3px 3px #888;
box-shadow: 1px 2px 3px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
position: relative;
z-index: 20;
}
ul.menu, ul.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu a {
display: block;
text-decoration: none;
color: #000;
line-height: 22px;
padding-right: 15px;
padding-left: 15px;
}
ul.menu li {
padding:0;
margin:0;
float:left;
}
ul.menu ul {
margin-left: 15px;
padding: 0;
position: absolute;
display: none;
background-color: #CCC;
z-index: 10;
}
ul.menu li:hover ul {
display: block;
}
ul.menu ul li {
float: none;
}
Here is the HTML:
<ul class="menu">
<li>ONE
<ul>
<li>SUB_ONE</li>
<li>SUB_TWO</li>
<li>SUB_THREE</li>
</ul>
</li>
<li>TWO</li>
<li>THREE</li>
</ul>
Is there any way that the first ul overlays the second ul or is it just not possible?

Answer 1

I have a work-around. By inserting a DIV above the nested UL that has its own shadow, you can get it on top of the sub-menu.
See: http://jsfiddle.net/SLkrN/6/

Answer 2

Short answer after some testing appears to be: even setting all elements to float, the containment of the sub menus in the parent .menu ul is causing them to not respond to z-index changes except relatively, never decreasing below the parent UL. I'll continue experimenting. May I suggest, however, putting the submenus lower so they at least are inline with the bottom of the parent ul?
ul.menu ul {
margin-left: 15px;
margin-top: 5px;
padding: 0;
position: absolute;
display: none;
background-color: #CCC;
z-index: 10;
}