Dynamic drop down menus have always been a headache for web developers, mostly due to quirky rendering behavior across different browsers. IE7 presents a unique challenge with the way it renders z-index stacking orders.Even though I had all of my z-index values correct, drop down menus were being placed underneath a relatively positioned <div> that occured further down the page.There is a very elegant solution to this problem that requires jQuery and a few lines of javascript code at the bottom of the page. The following code traverses through your <div> tags assigning the ones at the top of the page a higher value. Worked like a charm for me!jQuery(function() {
var intIndex = 1000;
jQuery('div').each(function() {
jQuery(this).css('zIndex', intIndex); intIndex -= 10;
});
});Special thanks to Vance Lucas for posting this function on his blog.
