Z-index in nested UL

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><a href="#">ONE</a>
    <ul>
      <li><a href="#">SUB_ONE</a></li>
      <li><a href="#">SUB_TWO</a></li>
      <li><a href="#">SUB_THREE</a></li>
    </ul>
  </li>
  <li><a href="#">TWO</a></li>
  <li><a href="#">THREE</a></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/