menu vertical (javascript)

Bonjour,

Je voudrai faire un menu déroulant vertical, mais avec les sous menu qui s'affiche horizontallement.
Lorsque le curseur passe sur une rubrique la couleur doit changer et le sous menu doit s'afficher (la rubrique du menu doit changer de couleur).Lorsque le curseur passe à une autre rubrique, le sous menu doit s'éffacer et le sous menu précédent doit revenir à la couleur initiale.
Tout se passe presque bien mais lorsque le curseur quitte la sous rubrique le menu ne revient pas à sa couleur initiale.
Voici le code :
-----
color='#000000';
bgmenu='#B7A599';
color3='#FFFFFF';
bgsousmenu='#E0D4C6';
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:15; left:99px ')
document.write('#topgauche { position:absolute; z-index:10; }')
document.write('</style>')
document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');

/*LIENS*/
zlien = new Array;
zlien[1] = new Array;
zlien[1][0] = '<td class=\"StyleSMenu\" height=\"19\" width=\"100\" onclick="menuClickPhp(\'realisation\')" onMouseOver=\"this.style.color=\'black\';this.style.background=\''+bgsousmenu+'\'\" onMouseOut="this.style.color=\''+color+'\';this.style.background=\''+bgmenu+'\'">Professionnelles</td>';
zlien[1][1] = '<td class=\"StyleSMenu\" height=\"19\" width=\"100\" onclick="menuClickPhp(\'realisation\')" onMouseOver=\"this.style.color=\'black\';this.style.background=\''+bgsousmenu+'\'\" onMouseOut="this.style.color=\''+color+'\';this.style.background=\''+bgmenu+'\'">Privées</td>';
zlien[1][2] = '<td class=\"StyleSMenu\" height=\"19\" width=\"100\" onclick="menuClickPhp(\'realisation\')" onMouseOver=\"this.style.color=\'black\';this.style.background=\''+bgsousmenu+'\'\" onMouseOut="this.style.color=\''+color+'\';this.style.background=\''+bgmenu+'\'">Mobilier</td>';

if(document.getElementById)
{
skn = document.getElementById("topdeck").style
skn.left = 100;
}

function pop(msg,pos)
{
skn.visibility = "hidden";
a=true
skn.top = pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 HEIGHT=19 WIDTH=300><TR height=19><TD HEIGHT=19><TABLE WIDTH=300 HEIGHT=19 BORDER=0 CELLPADDING=0 CELLSPACING=4><tr HEIGHT=19>";
pass = 0
while (pass < msg.length)
{
content += msg[pass];
//content += "<TD WIDTH='100' class=\"Style1\" onMouseOver=\"this.style.color=\''+color+'\';this.style.background='"+color2+"'\" onMouseOut=\"this.style.color=\'"+color3+"\';this.style.background='"+color+"'\" HEIGHT=20>&nbsp;&nbsp;"+msg[pass]+"</TD>";
pass++;
}
content += "</tr></TABLE></TD></TR></TABLE>";
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";
}

// Permet de cacher un popup précedent
function hide()
{
skn.visibility = "hidden";
a=true
content += " ";
skn.visibility = "visible";
}

function menuClickPhp(mnu) {
document.location = "./"+mnu+".php";
}

function kill()
{
if(document.getElementById)
skn.visibility = "hidden";
}
function menu1(msg,obj)
{
this.style.background = color;
pass=0
while (pass < msg.length)
{
this.style.background = bgmenu;
pass++;
}
if (msg.length = 0)
{
this.style.background = color;
}

}

if(document.getElementById)
{
document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=100 HEIGHT=130><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100 HEIGHT=130>')
document.write('<tr height=18><TD WIDTH=100 </TD></tr>')
document.write('<tr height=19><TD WIDTH=100 ALIGN=left class="Style1" onclick="menuClickPhp(\'esprit\')" onMouseOver="this.style.color=\''+color3+'\';this.style.background=\''+bgmenu+'\';hide()" onMouseOut="this.style.color=\''+color3+'\';this.style.background=\''+color+'\'" >L\'ESPRIT</TD></tr>')
document.write('<tr height=19><TD WIDTH=100 ALIGN=left class="Style1" onclick="menuClickPhp(\'esprit\')" onMouseOver="this.style.color=\''+color3+'\';this.style.background=\''+bgmenu+'\';hide()" onMouseOut="this.style.color=\''+color3+'\';this.style.background=\''+color+'\'" >SERVICES</TD></tr>')
//document.write('<tr height=19><TD WIDTH=100 HEIGHT=19 ALIGN=left class="Style1" onMouseOver="this.style.color=\''+color3+'\';this.style.background=\''+bgmenu+'\';pop(zlien[1],56)" onMouseOut="this.style.color=\''+color3+'\';this.style.background=\''+color+'\'">REALISATIONS</TD></tr>')
//onMouseOut="this.style.color=\''+color3+'\';this.style.background=\''+color+'\'"
document.write('<tr height=19><TD WIDTH=100 HEIGHT=19 ALIGN=left class="Style1" onMouseOver="this.style.color=\''+color3+'\';this.style.background=\''+bgmenu+'\';pop(zlien[1],56)" onMouseOut=perso(zlien[1],this) >REALISATIONS</TD></tr>')
document.write('<tr height=19><TD WIDTH=100 ALIGN=left class="Style1" onclick="menuClickPhp(\'actualites\')" onMouseOver="this.style.color=\''+color3+'\';this.style.background=\''+bgmenu+'\';hide()" onMouseOut="this.style.color=\''+color3+'\';this.style.background=\''+color+'\'">ACTUALITES</TD></tr>')

document.write('<tr height=19><TD WIDTH=100 ALIGN=left class="Style1" onclick="menuClickPhp(\'esprit\')" onMouseOver="this.style.color=\''+color3+'\';this.style.background=\''+bgmenu+'\';hide()" onMouseOut="this.style.color=\''+color3+'\';this.style.background=\''+color+'\'">CONTACT</TD></tr>')
document.write('<tr height=17><TD WIDTH=100 </TD></tr>')
document.write('</TABLE></TD></TR></TABLE></DIV>')
}
document.write('</div>');
-----
Merci de votre aide