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
- 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?
- 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.
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>
This recipe can be found in it's original form on Stack Over Flow.