CSS: Interleaving z-index with ul and div

Question

I'm trying to have a sidebar menu overlap a content div, where the active menu item render over the div and the non-active items would render under. The intersection between a ul and div would be small, but the interleaving effect would create an illusion of depth.

I understand that z-index only applies to sibling elements. So the following doesn't work:

#menu {z-index:0}
#menu li.active {z-index:2}
#content {z-index:1}

<ul id="menu">
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<div id="content">Side content</div>

Is there a good way to do this without having to make each menu item a div on the same level as #content?

Answer 1

Rather than messing with z-indices and hairy CSS hacks, may I suggest using some background tricks? One thing you can do is to give the menu a repeating background so that a portion of it APPEARS to be part of the content div. Then the active item can have a background that appears to extend into the content. This is much simpler and avoids a lot of headaches.

Answer 2

I suggest instead of using z-index to do this, try setting the widths of the li items based on whether they are active or not. If you make the side bar navigation flush with the content div, you could then feasibly make the .active li slightly wider so that it overlaps the content div. This way it will look like the non-active part of the menu is under the content div. If I'm not understanding your idea correctly perhaps you could show me an example. Good luck, sounds like a nifty effect.

Answer 3

give the li a z-index instead of the #menu:

#menu li {z-index:0}
#menu li.active {z-index:2}
#content {z-index:1}

And don't forget to position them relative for the z-index to take effect.