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?

Not looking promising: http://stackoverflow.com/questions/2503705/html-how-to-get-a-child-element-to-show-behind-lower-z-index-than-its-parent — Diodeus - James MacFarlane, Aug 31 '11 at 17:47

score 4 · Accepted Answer · answered Aug 31 '11 at 18:05

4

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/

answered Aug 31 '11 at 18:05

Diodeus - James MacFarlane

112,730
33
157
176

Hey, that's really nice. Thank you very much! Works in Firefox, Opera and Safari (haven't tested it in IE yet). I just have to look if I can improve the shadow-thing, but it's definitely the right direction! – Mike Aug 31 '11 at 18:20
If all you're after is the drop shadow, you might consider moving a 1px high div into the submenu uls above the `LI`s to avoid potential click blocking. – stslavik Aug 31 '11 at 18:24
1

I found a different solution. Same idea, different implementation. http://www.pamgriffith.net/blog/complex-uses-of-css3-box-shadow – Diodeus - James MacFarlane Aug 31 '11 at 20:41

stslavik · Answer 2 · 2011-08-31T17:57:04.907

0

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;
}

edited Aug 31 '11 at 17:57

answered Aug 31 '11 at 17:24

stslavik

2,920
2
19
31

Whoops. Absolutely right. My apologies. I'll correct that instantly then. – stslavik Aug 31 '11 at 17:37
Yes, I already tried putting the submenus lower. It's OK but not really a good solution. Anyway, thanks for experimenting! Maybe you find a solution. I'll keep trying too. – Mike Aug 31 '11 at 18:05
Have you considered using javascript as a solution to your problem? You could position the submenu relative to the hovered element. – stslavik Aug 31 '11 at 18:16
Yes I did consider using javascript ... i'll give that a try too. – Mike Aug 31 '11 at 18:21

Z-index in nested UL

2 Answers2