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

Заранее за помощь.

Edit: Вот 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> 

Я попытался добавить дисплей: встроенный в .menu без эффекта, и когда я добавил его .menu мкл или добавить его к обеим этим был результатом в IE7: http://img830.imageshack.us/img830/9855/ieresult.png

Редактировать # 2: РЕШЕНИЕ: Я исправил проблему, используя чей-то проект в Google Code, который использует javascript, чтобы заставить IE вести себя как более стандартный браузер. Вот ссылка! http: //code.google.com/p/ie7-js/

Answer 1

У вас, вероятно, есть либо ошибка с поломкой с двойным краем, либо скомпенсированный родитель с ошибкой поплавков.

Я бы добавил display: inline; в .menu и/или .menu ul.