I have a simple CSS enabled dropdown that can be displayed in double rows on narrower screens.
When I activate the expansion of one of the elements of the top line, the drop-down menu appears at the same level of "Z" as the bottom line.
I thought I installed z-indexs as needed, but it does not work in Chrome, Firefox, Safari or iPhone.
Here is an example: http://jsfiddle.net/bNBp3/ - "Meat" has a drop-down list.
<ul id="main-navigation"> <li><a href="/" title="Go to the Home page"><span>Home</span></a> </li> <li><a href="/meat/" title="Go to the Meat page"><span>Meat</span></a> <ul> <li><a href="/meat/bacon/" title="Go to the Bacon page"><span>Bacon</span></a></li> <li><a href="/meat/ham/" title="Go to the Ham page"><span>Ham</span></a></li> <li><a href="/meat/pork/" title="Go to the Pork page"><span>Pork</span></a></li> </ul> </li> <li><a href="/vegetables/" title="Go to the Vegetables page"><span>Vegetables</span></a> </li> <li><a href="/about-us/" title="Go to the About Us page"><span>About Us</span></a> </li> <li><a href="/contact-us/" title="Go to the Contact Us page"><span>Contact Us</span></a> </li> <li><a href="/az/" title="Go to the AZ page"><span>AZ</span></a> </li> </ul>
ul#main-navigation { display:block; border-bottom:1px solid #ccc; margin:0 auto 0px auto; min-height:21px; padding:0; width:100%; z-index:11; clear:both; } ul#main-navigation li { display:block; float:left; list-style:none; margin:0 5px 0 0; padding:0; position:relative; z-index:12; min-height:22px; min-width:30%; } ul#main-navigation li a { color:#000; display:block; padding:2px; text-decoration:none; z-index:13; } ul#main-navigation li a.current, ul#main-navigation li a.section { color:#fff; } ul#main-navigation li ul { background:#eee; position:absolute; left:-1px; top:21px; display:none; overflow:hidden; padding:0px; z-index:14; width:100%; border:1px solid #ccc; } ul#main-navigation li ul li { display:block; float:none; margin:0; z-index:15; width:100%; border-bottom:1px solid #ccc; } ul#main-navigation li ul li a { background:#eee; display:block; color:#333; z-index:16; zoom:100%; } ul#main-navigation li ul li a:hover { background:#fff; } ul#main-navigation li:hover { background:#eee; border-left:1px solid #ccc; border-right:1px solid #ccc; } ul#main-navigation li:hover a.current { background:#eee; color:#000; } ul#main-navigation li:hover ul { display:block; }
source share