Sous-menu déroulant inaccessibles sous IE8

Bonjour à tous, et merci d'avance pour votre aide car malgré de longues recherches sur les forums de développement, je ne trouve pas de solution à mon problème...

Suite au passage de la version 6 d'Internet Explorer à la version 8, un menu déroulant, qui fonctionnait très bien avec IE6, devient inaccessible sous IE8. Visuellement il n'y a aucun problème mais c'est en fait les sous-menus qui deviennent inaccessibles : lorsque je suis sur le menu supérieur, les sous-menus correspondants se déroulent bien mais lorsque j'essaye de passer dessus, je perds le focus et les sous-menus disparaissent.

Comment est ce possible que quelque chose qui fonctionne très bien sous IE6 déraille complètement sous IE8 ? 2 langages différents sont utilisés :

- JavaScript : pour la forme, la mise en place d'une liste <DIV>, <TABLE>, <TR>, <TD>, ...
- CSS : pour le fond, le format des données

Voici le code JavaScript en question :

<DIV id="menu_haut">
<DIV class="menuD">
<ul>
<li>
<a href="#">MENU 1
<TABLE>
<TR>
<TD>
<UL>
<li><a href="www.google.fr">sous-menu 1</a></li>
<li><a href="www.yahoo.fr">sous-menu 2</a></li>
</UL>
</TD>
</TR>
</TABLE>
</A>
</li>
</ul>
</DIV>
</DIV>

Et les CSS liées :

<STYLE>

#menu_haut

{
margin-top : 0px ;
background-color : #f7f7f7 ;
font-family : Arial ;
height : 30px ;
width : 800px ;
position : relative ;
left : 50% ;
z-index : 2 ;
margin-left : -400px ;

}

.menuD

{
font-size : 12px ;
color : rgb(0,0,0) ;
background : #FFFFFF ;
border : none ;
float : left ;
white-space : nowrap ;
width : 800px ;
position : relative ;
z-index : 1000 ;
}

.menuD table
{
border-collapse : collapse ;
left : 0 ;
top : 0 ;
position : absolute ;
}

.menuD ul

{
list-style-type : none ;
padding : 0 ;
margin : 0 ;
}

.menuD ul li

{
border-right : solid 1px rgb(175,175,175) ;
float : left ;
z-index : 1001 ;
}

.menuD ul li a

{
text-decoration : none ;
display : block ;
font-weight : bold ;
color : rgb(100,100,100) ;
float : left ;
padding : 0 8px 0 8px ;
height : 3.1em ;
line-height : 3.1em ;
}

.menuD ul li a:hover

{
z-index : 1002 ;
position : relative ;
background-color : rgb(210,210,210) ;
text-decoration : none ;
}

.menuD ul li a:hover ul

{
z-index : 1000 ;
left : 0 ;
position : absolute ;
display : block ;
font-size : 12px ;
width : 200px ;
top : 37px ;
}

.menuD ul li a:hover ul li a

{
font-weight : normal ;
height : 1px ;
line-height : 1.3em ;
border : solid 1px rgb(175,175,175) ;
color : rgb(50,50,50) ;
background-color : rgb(237,237,237) ;
display : block ;
white-space : normal ;
width : 200px ;
padding : 4px 16px 4px 16px ;
}

.menuD ul li a:hover ul li a:hover

{
text-decoration : none ;
background-color : rgb(210,210,210) ;
}

.menuD ul li ul

{
Display : none ;
Border : none ;
}

</STYLE>


Merci d'avance pour votre aide, je suis complètement perdu et pas assez expert pour solutionner de problème !!!