Content of my page overlaps the drop-down menu in IE7

I've tried positioning the header 'relative' with a high z-index and the content with position relative as well but the drop down hides as soon as I mouse over above where the content starts in IE 7. It's on this page - http://www.legrandconfectionary.com/truffle-flavors/ I thoug开发者_开发技巧ht it has something to do with tool-tip on the truffles but it's happening on every page. Help is greatly appreciated.

I'm going to go out on a limb and say it's related to your tooltip plugin's divs which are left behind after you've no longer hovered over them. You can't see them, but they are there. Try adding this to your CSS file:

.tooltip { z-index: 50; }

Theoretically this will prevent the tooltip from being rendered on top of the UL element making up the drop-down menu. I have a feeling that IE 7 is bubbling the mouseover event onto the hidden tooltip (which probably stops the bubbling at itself) thus cancelling the mouseover event on your UL. Which your nav relies on since IE7 doesn't support :hover on LI elements.

EDIT: After reviewing further I am no longer convinced that it is the div which is created by the tooltip plugin, but I am convinced that what I stated about the plugin cancelling the bubble on the mouseover event. I believe your tooltip plugin is the culprit. Try disabling it and then check if the behavior persists.