Internet Explorer : un menu deroulant horizontal ne fonctionne pas

Bonjour, je souhaite afficher dans mon site l'arborescence qui mène à la page en cours. Avec, lorsqu'on survole un élément de l'arborescence, l'affichage de la liste de ses pages filles pour faciliter la navigation.

Voici le résultat.
Remarquez les menus qui s'affichent lorsqu'on survole les liens "enquete" et "personnages".
Tout fonctionne parfaitement avec Firefox . Mais le résultat est catastrophique sous Internet Explorer...

Le menu se base sur le tutorial d'Alsacréations "le menu horizontal déroulant".
J'ai modifié le CSS pour que le menu se positionne dans le flux de la page (pas de "position: absolute;" pour la division du menu). En effet je veux que le menu se place juste après le bandeau, dont je ne connais pas la hauteur.
Ensuite je ne donne pas de largeur fixe pour les éléments dl.
D'après ce que j'ai analysé, ce sont les modifications qui mènent aux problèmes sous Internet Explorer.

Pouvez-vous m'aider à faire fonctionner ce menu dans Internet Explorer ?

Merci


Voici le CSS :

body {background-color:#000;color: #fff;margin:0 0 1em 0;padding:0;}
a {color: #033;}
a:link, a:visited {color: #fc9; text-decoration:underline;}


/* Arborescence */
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#hierar {
	margin-right:74px;
}

#hierar dl {
	float:right;
	margin: 0 0.2em;
}

#hierar dt {
	color:#c00;
	cursor: pointer;
}

#hierar dd {
	position:absolute;
	border: 1px solid #f00;
	background-color: #500;
	padding:0.3em;
	margin:0;
	z-index:100;
}
#hierar li a, #hierar dt a {
	text-decoration: none;
	display: block;
	height: 100%;
}
#hierar li a:hover, #menu dt a:hover {
	color:#c00;
	text-decoration:underline;
}

mets ul {position:absolute;}
seule solution pour IE

Merci pour ton aide, malheureusement ca ne résoud pas le problème...