Alternative for z-index?

[Attila Hajzer]

I had trouble making a proper dropdown so i decided to use Chris Choyier’s Dropdown (downloads) its actually really good.

I have recently been using it for a site im making. and Ive installed a content-slider pluging for wordpress, its fully functional, but because the slider is at the top of the page (just under navigation) the dropdown goes behind some of the menu options. and ive tried z-index but it didn’t seem to work, i tried setting it for the drop down elements, as well as the content slider, it just doesn’t seem to work.

im creating the site locally, but i do have a screen shot.
[Before the content slider]
http://twitpic.com/7anysq

[After content slider was installed]
http://twitpic.com/7ki6r9

CSS Code for dropdown.

/*DROPDOWN*/



#header #navigation{height:40px; margin-top:-33px;padding:10px 10px 15px 10px; border-radius:8px; background-color:#FFF;}

/*

LEVEL ONE

*/

ul.dropdown                         { position: relative;bottom:3px;}

ul.dropdown li                      { font-weight: normal; float: left; zoom: 1; background: #fff; }

ul.dropdown a:hover		            { color: #000; }

ul.dropdown a:active                { color: #FFF; }

ul.dropdown li a                    { display: block; padding: 7px 18px; border-right: 1px solid #CCC;

color: #222; }

ul.dropdown li:first-child,

ul.dropdown li a:hover{ border-radius:6px 0 0 0; } /* Doesn't work in IE */



ul.dropdown li:last-child,

ul.dropdown li a:hover{ border-radius:0 6px 0 0; } /* Doesn't work in IE */



ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */



ul.dropdown li.hover,

ul.dropdown li:hover                { background: #9ACD32; color: black; position: relative; } /*F3D673*/

ul.dropdown li.hover a              { color: black;}





/*

LEVEL TWO

*/

ul.dropdown ul 						{ width: 200px; visibility: hidden; position: absolute; top: 100%; left: 0; border-radius:0; }

ul.dropdown ul li 					{ font-weight: normal; background: #333333; color: #FFF;

border-bottom: 1px solid #666; float: none; }



/* IE 6 & 7 Needs Inline Block */

ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; color:#FFF;  border-radius:0;}



/*

LEVEL THREE

*/

ul.dropdown ul ul 					{ left: 100%; top: 0; }

ul.dropdown li:hover > ul 			{ visibility: visible; }

let me know if anything else is needed.

[Author]

Posts