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

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>