Get a free trial // Grow your CSS skills // Land your dream job

Alternative for z-index?

  • # November 27, 2011 at 3:57 am

    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]

    [After content slider was installed]

    CSS Code for dropdown.


    #header #navigation{height:40px; margin-top:-33px;padding:10px 10px 15px 10px; border-radius:8px; background-color:#FFF;}
    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;}

    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;}

    ul.dropdown ul ul { left: 100%; top: 0; }
    ul.dropdown li:hover > ul { visibility: visible; }

    let me know if anything else is needed.

    # November 27, 2011 at 4:07 am

    Make sure you

    1. Have a position set for the element you apply a z-index to or it will not work properly.
    2. Make sure you apply the z-index properties to both the nav AND the slider container to force z on both.
    3. Make sure the item you want on top has a higher value…

    ul.dropdown, ul.dropdown ul, ul.dropdown ul ul { position: relative; bottom: 3px; z-index: 100; }
    #content_slider { position: relative; z-index: 1; }
    # November 27, 2011 at 5:13 am

    thank you so much it worked.
    by the way could you check my other post out?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed