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]
    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.

    # 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?

    http://css-tricks.com/forums/discussion/14724/pseudo-element-and-selector.#Item_2

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".