IE中CSS下拉菜单的定位问题

我编写了一个css下拉菜单，除了IE（至少在IE7中）之外，它似乎在所有浏览器中都能正常工作

这里有一个链接，链接到一张图片，显示它在正常运行时的外观（还没有足够的代表发布图片）： http://img535imageshack.us/i/chromeexample.png/

这里有一个链接，指向它在IE中的外观： http://img299.imageshack.us/i/ieexample.png/

如果您想查看整个网站，请访问urbanpromise.org

以下是css菜单编码：

.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;
}

提前谢谢你的帮助

编辑：以下是菜单的HTML代码：

<div class="menu">
<ul>
<li><a href="index.php?go=home"><span class="h2">Home</span></a></li>
</ul> 
<ul>
<li>Information <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li><a href="index.php?go=staffandboard">Staff and Board</a></li>
<li><a href="index.php?go=historyandmission">History and Mission</a></li>
<li><a href="index.php?go=media">Media</a></li>
<!--<li><a href="index.php?go=speakerinfo">Speaker Information</a></li>-->
<li><a href="index.php?go=contactus">Contact Us</a></li>
</ul>
</li>
</ul>
<ul>
<li>Calendars <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li><a href="index.php?go=schoolcalendar">UrbanPromise School</a></li>
<li><a href="index.php?go=programcalendar">Summer/Afterschool</a></li>
<li><a href="index.php?go=supportercalendar">Volunteer/Supporter</a></li>
</ul>
</li>
</ul>
<ul>
<li>Programs <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li><a href="index.php?go=streetleader">StreetLeader</a></li>
<li><a href="index.php?go=afterschool">Afterschool Programs</a></li>
<li><a href="index.php?go=urbanpromiseschool">UrbanPromise School</a></li>
<li><a href="index.php?go=summercamps">Summer Camps</a></li>
<li><a href="index.php?go=internship">Internship</a></li>
</ul>
</li>
</ul>
<ul>
<li>Get Involved <img src="img/index/dropdown.png" width="13" height="8" alt="dropdown">
<ul>
<li><a href="index.php?go=donate">Donate</a></li>
<li><a href="index.php?go=volunteer">Volunteer</a></li>
<li><a href="index.php?go=workgroups">Workgroups</a></li>
<li><a href="index.php?go=store">Store</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="index.php?go=blog">&nbsp;Blog&nbsp;</a>
</li>
</ul>
</div>

信息









日历








节目










介入

---

我尝试将display:inline添加到.menu，但没有效果，当我将其添加到.menu ul或将其同时添加到这两个菜单时，IE7中的结果是：

编辑#2：解决方案：我使用谷歌代码上的某个人项目修复了这个问题，该项目使用javascript使IE的行为更像标准浏览器。这里有一个链接！

---

http://code.google.com/p/ie7js/

您可能有一个双边距浮点错误或一个折叠的带有浮点错误的父级

---

我要添加

display:inline

到

.menu

和/或

.menu ul

请发布与此相关的HTML。我建议不要使用纯CSS下拉列表，而是使用JS。jQuery使它的实现变得如此简单！我试图避免使用jQuery——这很好，但我的页面加载时间已经足够长了。我尝试将display:inline添加到.menu，但没有效果，当我将其添加到.menu ul或将其添加到这两者时，这就是IE7中的结果：找到了一种自己解决问题的方法，在上面发布了解决方案。无论如何谢谢你的帮助！