The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Alternative for z-index?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #35349
    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]

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

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.