CSS3 Drop-down menu z-index issue

Question

I'd like to create CSS3 multi-level drop-down menu and I have found a few examples on the Internet.

I decided to use this one because it has nice animations (that unfortunately fail to work well in real life use case): http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-DropdownMenu/index.html

My questions:

1. I can't fix second level z-index issue in any way (it starts animating on TOP of first drop-down list and it should be beneath it). Can anyone point me in the right direction?
2. Are there any better CSS3 only drop-down menus? I'm looking for something that will work with any number of levels and would behave nicely on all resolutions.

Answer 1

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Try giving the Z-indices in order from lower to higher. Make sure other elements on your page are not having already defined z-index.

If that not works, I would like to have a look at your page/code.

Answer 2

z-index is more complicated than it appears. Your elements may be in different "stacking contexts", which means their z-indexes do not interact directly. Trace the two conflicting elements up the DOM hierarchy until you reach a common ancestor. Start assigning your z-indexes there, and work your way back.

Here's an article on stacking contexts: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context

In the example below, if #content-wrapper overlapped #nav ul li, you would start setting z-index on #header and #content. Depending on the other CSS and markup, you may need to continue down into #nav and #content-wrapper before it works.

<div id="page">
  <div id="header">
    <div id="nav"><ul><li>etc</li></ul>
  </div>
  <div id="content">
    <div id="content-wrapper">
      Blah
    </div>
  </div>
</div>