I have a drop down menu and it works perfectly on everything except IE6 & IE7.
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?
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:
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).