CSS在IE下拉菜單定位問題

Question

我編寫了一個css下拉菜單，似乎在每個瀏覽器中都能正常工作，但Internet Explorer（至少在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> 

我嘗試添加顯示：內嵌沒有影響。菜單，並且當我添加它。菜單UL或添加它來既此是在IE7中的結果： http://img830.imageshack.us/img830/9855/ieresult.png

編輯＃2：解決方案：我解決了這個問題，使用Google代碼上的某個人的項目，使用JavaScript使IE的行爲像一個更標準的瀏覽器。這是一個鏈接！ http：//code.google.com/p/ie7-js/

Answer 1

您可能有一個雙邊距浮動錯誤或浮動錯誤的摺疊父母。

我會將display: inline;添加到.menu和/或.menu ul。