drop down menu needs to display over everything, but it is underneath a certain div.

Question

I have a drop down menu and it works perfectly on everything except IE6 & IE7.

Here it is in the Safari/Firefox browsers: http://tinyurl.com/at2cb4 Here is how it looks in IE6 & IE7: http://tinyurl.com/beop5l

Here is the CSS for the div where it hides underneath for IE 6/7

#featured-programs-left img,
#featured-programs-right img{
    overflow:auto;
    border:0;
}

#featured-programs-left,
#featured-programs-right {
    height:625px;
    float:left;
    overflow:auto;
    clear:left;
    clear:right;
    width:100%;
}

#featured-programs-left div,
#featured-programs-right div {
    overflow:auto;
    clear:left;
    clear:right;
    width:352px;
    height:345px;
}

#featured-programs-left {
    float:left;
}

#featured-programs-right {
    float:right;
}

Here is the jQuery (in the source code you'll see multiple div's within each main div (featured-programs-left & -right) and the jQuery fades each one in and out in a loop) for displaying the multiple items (fades the items in and out) within both sides of the div (#featured-programs-left & #featured-programs-right)

<script type="text/javascript">
$(document).ready(function() {
    $('#featured-programs-left').cycle({ 
     fx:  'fade', 
     speed: 'slow',
     timeout: 15000,
     next: '#next2',
     prev: '#prev2' 
    });
});

$(document).ready(function() {
    $('#featured-programs-right').cycle({ 
     fx:  'fade', 
     speed: 'slow',
     timeout: 21000,
     next: '#next3',
     prev: '#prev3' 
    });
});
</script>

Here is the CSS for the quicklinks (quicklinks is the drop down menu of links)

#header-nav-top li#quicklinks a:link,
#header-nav-top li#quicklinks a:visited,
#header-nav-top li#quicklinks a:active {
    padding-left: .9em;
    background: transparent url('/site/images/quicklinks_bullet.gif') no-repeat 0em .5em;
}

#header-nav-top li#quicklinks.hover {
    position: relative;
}

#header-nav-top li#quicklinks ul {
    position: absolute;
    display: none;
    xleft: -9999em;
    top: 14px;
    width: 142px;
    padding:5px 2px 5px 5px;
    z-index: 90;
    margin: 0px;
    background-color: #00693E;
    xborder: 1px solid #FDBE2F;
    xborder-width: 0px 1px 1px;
}

#header-nav-top li#quicklinks:hover ul,
#header-nav-top li#quicklinks.hover ul {
    left: 0px;
    display: block;
}

#header-nav-top li#quicklinks ul li {
    background: transparent none;
    float: none;
    margin: 0px 0px 0px;
    line-height: 1.4em;
    display: block;
    border:1px solid #00693E;
}

#header-nav-top li#quicklinks ul li a:link,
#header-nav-top li#quicklinks ul li a:visited,
#header-nav-top li#quicklinks ul li a:active {
    color: #fff;
    display: block;
    text-decoration: none;
    background: transparent none;
}

#header-nav-top li#quicklinks ul li a:hover {
    color: #C26B1A;
    background: transparent url('/site/images/bullet_link.gif') no-repeat 0% 6px;
}

What do you think may be causing it to not show the drop down menu over the items in featured-programs-left & featured-programs-right in IE 6/7?

Answer 1

Have you tried setting the z-index of the picture that's currently obscuring your menu to, say, 0? Have you got a "live" test URL we can look at? Alternatively, on the basis that IE is treating z-index incorrectly, have you got the leeway to position your drop-down menu's HTML after the other elements in the page, thereby bypassing z-index?

EDIT: Ah, apparently there's a bug. This link might explain, if not actually help...

Quote from MrTazz:

When running some special JavaScript it magicaly puts the div in the background. Uppdate the div and it comes back farward.

So maybe try updating the drop-down menu div somehow, just before the page is displayed?

EDIT: From Brad's comment, copied here for the edification of future readers: "This helped me out: http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/ I set #header to have a z-index of 2, and #content to have a z-index of 1." – Brad (5 hours ago)

So, to summarise: there's a z-index bug in IE 6/7. To get around it, explicitly set the z-index for the element(s) that is/are appearing in front of your menu to a low number (e.g. 1), and set the z-index for your menu's container to a slightly higher number (e.g. 2).

Answer 2

I set the #content z-index to 1

and set the z-index of the header, which is where the drop-down navigation is located to 2.

Answer 3

Hi, I have a problem. I am displaying a dynamic drop down from database. It is displaying fine for 1000 records. But it is not displaying if it is more than 1000 records. Also it is working fine in IE 7. Please guide me.