I’ve just spend two hours figuring out why my css styled list menu works fine in Chrome, Safari etc, but not in Microsoft Internet Explorer 7. I run into this kind of crap on many occasions, but this one was a real pain in the but. Besides everything, but useful to mention.. please drop IE7 and while your at it drop your Windows OS as well!
Anyways. After a lot of reading, reloading, etc. I finally ran into comment #26 on http://drupal.org/node/84608, which stated the following code which worked out great to me:
if($.browser.msie&&parseInt($.browser.version)<=7){
$(document).ready(function() {
var zIndexNumber = 10000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
}
This jQuery snippet puts all divs on your page into correct hierarchy for MSIE7 after loading the page (if implemented correct) since MSIE7 tends to make a mess out of rendering the z-indexes. In my case I had the menu finally on the highest z-index possible (I walked through all the nodes of my document) and the menu still appeared behind some form inputs. I tried all the positioning hacks you read about on stackoverflow.com f.i. but this didn't work for me. MSIE7 seems to restart the z-index on every positioned div it runs into.
Not saying you should use this, since this also messes up any z-index you have put onto a div through regular css, but it worked for me.