menu med undermenu

Hjælp!
jeg skal have nedenstående kode til at virke mere dynamisk.
Jeg skal ende med at have 6 menu´er med dertilhørende undermenuer.
Desuden skal det også virke i netscape.
Følgende virker ikke optimalt i netscape.
Og jeg skal også kunne klippe i formelementer hvis der skulle opstå nogen, det virker delvist i IE, men slet ikke i NS.
Jeg har selv forsøgt at lave en menu, men det virker squ ette rigtigt.

<html>
<head>
<STYLE>
.menu     {
            color: black;
            background-color: orange;
            font-size: 12px;
            text-decoration: none;
        }
#layer1  {
              position: absolute;
              z-index: 2;
              left: 94px;
              top: 20;
              visibility: hidden;
        }
#hidediv1  {
              position: absolute;
              z-index: 1;
              left: 0px;
        }
#layer3  {
              position: absolute;
              z-index: 3;
              left: 94px;
              top: 40;
              visibility: hidden;
        }
 
/* mouseover farver/font til cellerne i undermenuen. */       
.khaki    {          
            color: black;
            background-color: khaki;
            font-size: 12px;
              text-decoration: none;
        }
.orange  {                  
            color: black;
            background-color: orange;
            font-size: 12px; 
            text-decoration: none;
          }
</STYLE>
<SCRIPT>       

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ns6 = (document.getElementById)? true:false;

// Show/Hide functions for non-pointer layer/objects
function show(id) {
    if (ns4) document.layers[id].visibility = \"show\"
    else if (ie4) document.all[id].style.visibility = \"visible\"   
    else if (ns6) document.getElementById(id).style.visibility = \"visible\"
}

function hide(id) {
    if (ns4) document.layers[id].visibility = \"hide\"
    else if (ie4) document.all[id].style.visibility = \"hidden\"             
    else if (ns6) document.getElementById(id).style.visibility = \"hidden\"
}
         
/*fjerner noget af select boksen
clip:rect(top,right,bottom,left)
*/
function clipSelect(id) {
    if (ns4){                                                                                                             
        document.layers[id].oldClipWidth = document.layers[id].document.width;
        document.layers[id].clip.width = 94;
    }
    else if (ie4)                                                         
        document.all[id].style.clip = \'rect(auto 94px auto auto)\';
}
                                                         
//vis noget af select boksen igen
function unclipSelect(id) {
    if (ns4){
        document.layers[id].clip.width = document.layers[id].oldClipWidth;
    }
    else if (ie4)                                                           
        document.all[id].style.clip = \'rect(auto auto auto auto)\';
}   

</script>

</head>
<body>
<table>
    <tr>
        <td class=\"menu\" onmouseover=\"this.className=\'khaki\'\" onmouseout=\"this.className=\'orange\'\"><A HREF=\"#\" onmouseover=\"clipSelect(\'hidediv1\'); show(\'layer1\'); hide(\'layer3\');\">Menu punkt</A></td>
    </tr>
    <tr>
        <td class=\"menu\" onmouseover=\"this.className=\'khaki\'\" onmouseout=\"this.className=\'orange\'\"><A HREF=\"#\" onmouseover=\"hide(\'layer1\'); show(\'layer3\'); clipSelect(\'hidediv1\');\">Menu punkt </A></td>
    </tr> 
</table>

<br>
<div id=\"layer1\" onmouseover=\"clipSelect(\'hidediv1\'); show(this.id);\"  onmouseout=\"unclipSelect(\'hidediv1\'); hide(this.id)\">
<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td class=\"menu\" onmouseover=\"this.className=\'khaki\'\" onmouseout=\"this.className = \'orange\'\"><a href=\"#\">menu punkt</a></td></tr><tr><td class=\"menu\" onmouseover=\"this.className = \'khaki\'\" onmouseout=\"this.className = \'orange\'\"><a href=\"#\">menu punkt</a></td></tr><tr><td class=\"menu\" onmouseover=\"this.className = \'khaki\'\" onmouseout=\"this.className = \'orange\'\"><a href=\"#\">menu punkt</a></td></tr></table>
</div>
<br>
<div id=\"layer3\" onmouseover=\"show(this.id); clipSelect(\'hidediv1\');\" onmouseout=\"hide(this.id); unclipSelect(\'hidediv1\');\">
<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td class=\"menu\" onmouseover=\"this.className = \'khaki\'\" onmouseout=\"this.className = \'orange\'\"><a href=\"#\">menu punkt</a></td></tr><tr><td class=\"menu\" onmouseover=\"this.className = \'khaki\'\" onmouseout=\"this.className = \'orange\'\"><a href=\"#\">menu punkt</a></td></tr><tr><td class=\"menu\" onmouseover=\"this.className = \'khaki\'\" onmouseout=\"this.className = \'orange\'\"><a href=\"#\">menu punkt</a></td></tr></table>
</div>

        <div id=\"hidediv1\">
                <form name=\"formname\">
                    <table border=\"0\" align=\"center\" cellspacing=\"0\" cellpadding=\"0\">
                        <tr>
                            <td width=\"100\" height=\"100\"></td>
                            <td>
                        <select>
                                <option value=\"name\">menupunkt 1</option>
                                <option value=\"name1\">menupunkt 2</option>
                                <option value=\"name2\">menupunkt 3</option>
                        </select></td>
                        </tr>
                    </table>
                </form>   
        </div>       
</body>
</html>
Det skulle helst ha´ været færdigt igår, så hjælp!
Hvis i ikke helt forstår hvad jeg mener, så kopier koden og se den i en browser.