Vis undermenu præcis under hovedmenupunkt

Jeg har lavet en menu hvor undermenuerne kommer frem under menupunktet når man markerer hovedmenupunktet - fint nok.

I dag gør jeg det, at jeg har undermenuen i en <div> og den div styrer jeg så placeringen af ved hjælp af <div style="margin-left:XXXpx;">, så den kommer frem lige under det aktuelle hovedmenupunkt.

Men det fucker jo op hver gang jeg ændre antallet af hovedmenupunkter eller længden af de enkelte menupunkter :-(

Hvordan sikre jeg, at min undermenu "automatisk" kommer frem præcist under mit hovedmenupunkt?

Herunder et eksempel hvor der er undermenu til punkt 1 og 2.

*****************************
<style type="text/css">
TABLE.hovedtabel{
    width: 760px;
    padding: 0px;
    background-color: #FFFFFF;
    border-right: solid 1px #000000;
    border-left: solid 1px #000000;
    border-top: solid 1px #000000;
    border-bottom: solid 1px #000000;
}

.menu_out          { Font: 12px Verdana; color: #FFFFFF; background-color:#7BA6A6; height: 20px; }
.menu_over          { Font: 12px Verdana; color: #000000; background-color:#9DD5CC; height: 20px; }

.div_undermenu {
    position:absolute;
    background-color:#000000;
    cursor: pointer;
    visibility: hidden;
    border-right: solid 1px #020202;
    border-left: solid 1px #7F7F7F;
    border-bottom: solid 1px #020202;
}
</style>

<script language="javascript">
function menuOnMouseOUT(action,id) {
    myDelay = setTimeout('menuOnMouseOver("'+action+'",'+id+')', 100);
}

function menuOnMouseOver(action,id) {
    var blnFindes = false;
    var divs;
    var undermenuid;
    clearTimeout(myDelay);

    if (action == 'show'){
          //Skjul alle andre end den der skal vises
        divs=document.getElementsByTagName("div");
        for(n=0;n<divs.length;n++){
            if (divs[n].name == 'undermenu'){
                undermenuid = divs[n].id;
                if (id!=parseInt(undermenuid)){
                    divs[n].style.visibility = 'hidden';                    
                    document.getElementById('menu'+undermenuid).className = 'menu_out';
                }
            }
        }
        //Vis valgt menu
          document.getElementById(id).style.visibility = 'visible';
    }

    if (action == 'hide'){
        //Skjul valgt menu
          document.getElementById(id).style.visibility = 'hidden';
          document.getElementById('menu'+id).className = 'menu_out';
    }
}
</script>

<table class="hovedmenu" cellspacing="1">
<tr>
    <td width="14%" id="menu10001" class="menu_out" onMouseOver="menuOnMouseOver('show','10001'); this.className='menu_over'" onMouseOut="menuOnMouseOUT('hide','10001');">
        Punkt 1
    </td>
    <td width="14%" id="menu10002" class="menu_out" onMouseOver="menuOnMouseOver('show','10002'); this.className='menu_over'" onMouseOut="menuOnMouseOUT('hide','10002');">
        Punkt 2
    </td>
    <td width="14%" id="menu10003" class="menu_out" onMouseOver="this.className='menu_over';" onMouseOut="this.className='menu_out';">
        Punkt 3
    </td>
    <td width="14%" id="menu10004" class="menu_out" onMouseOver="this.className='menu_over';" onMouseOut="this.className='menu_out';">
            Punkt 4
    </td>
    <td width="14%" id="menu10005" class="menu_out" onMouseOver="this.className='menu_over';" onMouseOut="this.className='menu_out';">
            Punkt 5
    </td>
    <td width="14%" id="menu10005" class="menu_out" onMouseOver="this.className='menu_over';" onMouseOut="this.className='menu_out';">
            Punkt 6
    </td>
    <td width="14%" id="menu10007" class="menu_out" onMouseOver="this.className='menu_over';" onMouseOut="this.className='menu_out';">
            Punkt 7
    </td>
</tr>
</table>

<div id="10001" name="undermenu" class="div_undermenu" style="margin-left:0px;">
    <table width="155" border="0" cellspacing="1">
        <tr>
            <td width="100%" class="menu_out" onMouseOver="this.className='menu_over'; menuOnMouseOver('show','10001');" onMouseOut="this.className='menu_out'; menuOnMouseOUT('hide','10001');">
        Undermenu 1
            </td>
        </tr>
        <tr>
            <td width="100%" class="menu_out" onMouseOver="this.className='menu_over'; menuOnMouseOver('show','10001');" onMouseOut="this.className='menu_out'; menuOnMouseOUT('hide','10001');">
        Undermenu 2
            </td>
        </tr>
    </table>
</div>

<div id="10002" name="undermenu" class="div_undermenu" style="margin-left:110px;">
    <table width="155" border="0" cellspacing="1">
        <tr>
            <td width="100%" class="menu_out" onMouseOver="this.className='menu_over'; menuOnMouseOver('show','10002');" onMouseOut="this.className='menu_out'; menuOnMouseOUT('hide','10002');">
        Undermenu 1
            </td>
        </tr>
        <tr>
            <td width="100%" class="menu_out" onMouseOver="this.className='menu_over'; menuOnMouseOver('show','10002');" onMouseOut="this.className='menu_out'; menuOnMouseOUT('hide','10002');">
        Undermenu 2
            </td>
        </tr>
    </table>
</div>
*****************************