CSS Problème de positionnement du menu déroulant dans IE

Question

J'ai programmé un menu déroulant css qui semble fonctionner correctement dans tous les navigateurs sauf Internet Explorer (au moins dans IE7).

Voici un lien vers une image de la façon dont il semble quand il se comporte correctement (pas assez représentant pour publier des photos encore): http: // img535imageshack.us/i/chromeexample.png/

est ici un lien à quoi il ressemble dans IE: http: // img299.imageshack.us/i/ieexample.png/

Si vous voulez voir tout le site, il est à urbanpromise.org

Voici le menu css codage:

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

Merci d'avance pour l'aide.

Edit: Voici le code HTML pour le menu:

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

J'ai essayé d'ajouter display: inline à .menu sans effet, et quand je l'ai ajouté à .menu ul ou ajouté à la fois cette était le résultat dans IE7: http://img830.imageshack.us/img830/9855/ieresult.png

Édition # 2: SOLUTION: J'ai résolu le problème en utilisant le projet de quelqu'un sur Google Code qui utilise javascript pour faire IE se comporter comme un navigateur plus standard. Voici un lien! http: //code.google.com/p/ie7-js/

Answer 1

Vous avez probablement un bogue flottant à double marge ou un parent effondré avec un bogue flottant.

Je voudrais ajouter display: inline; à .menu et/ou .menu ul.