CSS Drop-down menu positioning problem in IE - css

Question

I've programmed a css dropdown menu that seems to be working correctly in every browser but Internet Explorer (at least in IE7).
Here's a link to a picture of how it looks when it behaves correctly (not enough rep to post pictures yet):
http : // img535imageshack.us/i/chromeexample.png/
Here's a link to how it looks in IE:
http : // img299.imageshack.us/i/ieexample.png/
If you want to view the whole website, it's at urbanpromise.org
Here's the css menu coding:
.menu{
width: 40em;
height: 2em;
background: #63089C;
float: left;
font-family: helvetica, arial, sans-serif;
}
.menu ul{
list-style: none;
float: left;
padding: .4em .75em;
margin: 0;
text-align: center;
font-weight: bold;
color: white;
}
.menu a{
text-decoration: none;
color: white;
}
.menu ul:hover{
color: black;
background: white;
}
.menu a:hover{
color: black;
background: white;
}
.menu ul ul{
position: absolute;
z-index: 500;
text-align: left;
}
div.menu ul ul{
display: none;
font-weight: normal;
}
div.menu ul li:hover ul{
display: block;
background: #63089C;
border: 0px solid black;
border-width: .125em 0;
}
Thanks in advance for the help.
Edit: Here is the HTML code for the menu:
<div class="menu">
<ul>
<li><span class="h2">Home</span></li>
</ul>
<ul>
<li>Information <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>Staff and Board</li>
<li>History and Mission</li>
<li>Media</li>
<!--<li>Speaker Information</li>-->
<li>Contact Us</li>
</ul>
</li>
</ul>
<ul>
<li>Calendars <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>UrbanPromise School</li>
<li>Summer/Afterschool</li>
<li>Volunteer/Supporter</li>
</ul>
</li>
</ul>
<ul>
<li>Programs <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>StreetLeader</li>
<li>Afterschool Programs</li>
<li>UrbanPromise School</li>
<li>Summer Camps</li>
<li>Internship</li>
</ul>
</li>
</ul>
<ul>
<li>Get Involved <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li>Donate</li>
<li>Volunteer</li>
<li>Workgroups</li>
<li>Store</li>
</ul>
</li>
</ul>
<ul>
<li> Blog
</li>
</ul>
</div>
I tried adding display: inline to .menu with no effect, and when I added it to .menu ul or added it to both this was the result in IE7:
http://img830.imageshack.us/img830/9855/ieresult.png
Edit #2: SOLUTION: I fixed the problem using someone's project on Google Code that uses javascript to make IE behave like a more standard browser. Here's a link!
http: //code.google.com/p/ie7-js/

Answer 1

You probably have either a double margin float bug or a collapsed parent with floats bug.
I'd add display: inline; to .menu and/or .menu ul.