JQuery IE7 Z-Index Bug

Question

I built a Jquery dropdown menu using this tutorial.

It works across browsers except for IE7 (shooooocking). There seems to be a z-index sorting problem and the drop down menu shows up under all of my other JQuery elements. I'm not sure how to set the z-index so that it shows up on top. I have thoroughly googled the issue and it seems to be related to multiple 'position:relative' elements. I've messed with it for a few hours but I can't seem to sort it out. I have already tried defining z-index for all the different page elements but it doesn't seem t help the situation.

You can check out the problem with this link.

Any help would be really appreciated - thanks! Also, I know there are other IE7 issues, but I'm pretty confident that I can solve those as they are standard IE padding/margins nonsense.

Answer 1

z-index alone won't help you. The order of the elements within the DOM makes the difference: Put the menu element at the end of the body via .appendTo("body") and you should be all set.