Spry Menu Overlap Issue With Internet Explorer 7 (IE7)

[csbsu_it]

Hi guys!

Over the last few months I've been trying to learn web design over youtube (yes, I know). Recently I've added a spry menu bar that works fine in firefox, but the submenu OVERLAPS ON TOP of the main menu on IE7.

Can anyone offer up a fix? Note: I am a super noob so please talk to me like I'm 5 years old or something. I've googled like crazy and I can't find a fix. :(

I'm using Dreamweaver CS4... I'm not exactly sure what I'm supposed to copy/paste for a diagnostic, but here goes:

<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="Index.html">Home</a></div>
</li>
<li>
<div align="center"><a href="AboutUs.html">About Us</a></div>
</li>
<li>
<div align="center"><a href="Events.html" class="MenuBarItemSubmenu">Events</a>
<ul>
<li><a href="Upcoming.html">Upcoming </a></li>
<li><a href="PastEvents.html">Past Events</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="PastTests.html" class="MenuBarItemSubmenu">Past Tests</a>
<ul>
<li><a href="Submit.html">Submit To Us</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="Store.html" class="MenuBarItemSubmenu">Store</a>
<ul>
<li><a href="Hoodies.html">Hoodies</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="ExecTeam.html" class="MenuBarItemSubmenu">Exec Team</a>
<ul>
<li><a href="JoinExec.html">How To Join</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="ContactUs.html" class="MenuBarItemSubmenu">Contact Us</a>
<ul>
<li><a href="OfficeHours.html">Office Hours</a></li>
<li><a href="www.fakesite.com>
</ul>
</div>
</li>
</ul>

Thank you very much!

[scottloway]

It's difficult to diagnose here without the other, supporting code (primarily your CSS). My guess is that you just need to position your MenuBarItemSubmenu, or define z-index. Still, we need to see more code here to help properly.