Menu déroulant et Internet Explorer

Bonjour,

J'en appelle à votre aide car (une fois n'est pas coutume), IE me pose de gros soucis (que ce soit IE7 ou IE8) au niveau de mon menu déroulant (en CSS pas de JavaScript).

Je m'explique, lorsque je veux aller au deuxième niveau de mon menu, je perds le focus, et le menu disparaît...

Voici le code HTML correspondant au menu :

<div id="menu"> 
<ul class="niveau1"> 
	<li><a href="ces.html" class="liensinternes2009"><strong>CES</strong>, Cotentin Energies System</a></li> 
	<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
	<li class="sousmenu"><a href="construire_renover.html" class="liensinternes2009">Construire / r&eacute;nover</a>
		<ul class="niveau2">
			<li><a href="#" class="liensinternes2009">Test1</a></li>
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
			<li><a href="#" class="liensinternes2009">Test2 qui nous permet de tester le menu même avec un texte long!!!!!!!!!!!!!!!!!!!!!!!!!</a></li> 
		</ul>
		</li>
		<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
		<li><a href="changer_energie.html" class="liensinternes2009">Changer d'&eacute;nergie</a></li> 
		<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
		<li class="sousmenu"><a href="informations_complementaires.html" class="liensinternes2009">Informations compl&eacute;mentaires</a> 
			<ul class="niveau2"> 
				<li><a href="#" class="liensinternes2009">Test3</a></li>
				<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
				<li><a href="#" class="liensinternes2009">Test4</a></li> 
			</ul> 
			</li> 
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
			<li><a href="projets_tertiaires.html" class="liensinternes2009">Projets tertiaires</a></li>
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
			<li><a href="faq.html" class="liensinternes2009">Foire aux questions</a></li>
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
			<li><a href="partenaires.html" class="liensinternes2009">Partenaires</a></li>
			<img src="images/espaceur.gif" alt="espaceur" width="1" height="1" />
		</ul> 
	</div>
	

Et les CSS...

div#menu{
	text-align:left;}

div#menu ul li { 
    position:relative; 
    list-style: none;
	border-bottom:1px solid #727A7F;} 

div#menu ul ul { 
    position: relative; 
    top: 0; 
    left: 100px;}   

div#menu li a { 
    text-decoration: none}

div#menu ul ul, div#menu ul li ul{ 
    position: absolute; 
    top: 0; 
    margin-left: 130px; 
    display:none;} 

div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3{ 
    display:block; }

div#menu a { 
    color:#000000 } 
	
div#menu li a { 
    text-decoration: none; 
    padding: 4px 0 4px 8px; 
    display:block; 
	border-left: 8px solid #BBB;
	width:auto; } 

div#menu li a:hover { 
    border-left-color: red; }
 
div#menu ul ul li a:hover { 
    border-left-color: #00FF00;} 

div#menu ul ul ul li a:hover { 
    border-left-color: #0000FF; }

div#menu ul ul li{
	border-top:1px solid #727A7F;
	border-right:1px solid #727A7F;
	border-bottom:1px solid #727A7F;
	border-left:1px solid #727A7F;
	padding-right:10px;}