THE PROBLEM:
I added images in the content below my menu built with the CSS Menu Designer. When you hover over a dropdown menu item it displays behind the images below in IE7.

At first I thought it was because the images were .png's but I changed them to .gif and the same problem still occurs.

I thought it could be a jquery problem so I commented out my jquery scripts but that didn't help.

I tried changing the z-index on the .menu-menu li ul but that doesn't help either.

The dropdown displayed fine in FF and IE8.

THE SOLUTION:

I ran across the answer on this site:
http://brenelz.com/blog/squish-the-inte … index-bug/

I simply added a new <div> around my existing menu and defined the new <div> in CSS with a high z-index.

HTML Before Fix:

<ul class="menu-menu">
<li <a href="index.htm">Home</a></li>
<li><a href="mma.htm">Programs</a>
<ul>
<li><a href="mma.htm">Martial Arts</a></li>
<li><a href="children.htm">Children</a></li>
<li><a href="fitness.htm">Physical Fitness</a></li>
<li><a href="defense.htm">Self Defense</a></li>
</ul>
</li>
</ul>

HTML After Fix:
<div id="iefix">
<ul class="menu-menu">
<li <a href="index.htm">Home</a></li>
<li><a href="mma.htm">Programs</a>
<ul>
<li><a href="mma.htm">Martial Arts</a></li>
<li><a href="children.htm">Children</a></li>
<li><a href="fitness.htm">Physical Fitness</a></li>
<li><a href="defense.htm">Self Defense</a></li>
</ul>
</li>
</ul>
</div>


CSS:
#iefix {
position:relative;
z-index:1000;
}

My menu dropdowns now work fine in ie7, ie8 and FF.

Good job! (and thanks for sharing the fix)