onMouseOut og rowspan

Hejsa

Jeg forsøger at lave en lille, simpel menu med noget java script:

<script language="javascript" type="text/javascript">
    function HighlightSubMenu(subToShow)
    { 
        document.getElementById(subToShow).style.display = '';
    }
    function UnHighLightSub()
    {       
        document.getElementById('subMenu1').style.display = 'none';
    }
</script>
<table cellpadding="0" cellspacing="0" border="0" style="text-align:left;">       
    <tr>
        <td>
            Menu
        </td>
        <td rowspan="2" style="vertical-align:top; width:601px;" onmouseout="UnHighLightSub()"> 
            <table cellpadding="6" cellspacing="0" border="0">
                <tr>
                    <td ></td>
                    <td onmouseover="HighlightSubMenu('subMenu1')" id="menu1">Menu1</td>
                    <td onmouseover="HighlightSubMenu('subMenu2')" id="menu2">Menu2</td>
                    <td onmouseover="HighlightSubMenu('subMenu3')" id="menu3">Menu3</td>
                    <td onmouseover="HighlightSubMenu('subMenu4')" id="menu4">Menu4</td>
                    <td onmouseover="HighlightSubMenu('subMenu5')" id="menu5">Menu5</td>
                    <td onmouseover="HighlightSubMenu('subMenu6')" id="menu6">Menu6</td>
                </tr>
            </table>
            <div id="subMenu1" style="display:none;">
                undermenu
            </div>         
        </td>
        <td ></td>
    </tr>
    <tr>
        <td> </td>     
        <td> </td>
    </tr>   
</table>

Problemet er, at UnHighLightSub() bliver fyret af, hvis man krydser den linie, hvor der ville have været celleskift, hvis jeg ikke havde skrevet rowspan="2".

Altså, undermenuen bliver skjult, når man bevæger musen ned under menupunktet, selvom man ikke har forladt den celle, hvor onMouseOut er sat på.

Hvad er det lige der går galt?
Jeg har testet med IE8 og FireFox 3.

PS.
I skal ikke tage jer af, at submenu2-6 mangler