Dropdown menu fungere kun halvt?

Hej, jeg er igang med en side, hvor der er en dropdown menu på, det virker såden halvt.

I firefox så flytter den en af menupunkterne ned på næstelinje og opføre sig dumt, eller kun indtil man opdatere, men så gør den det igen ved  side skift.

Det er min kode:

    <script language="javascript">
        var dropDowns = {}
        function sm(menuName){
            if(dropDowns[menuName])clearTimeout(dropDowns[menuName])
            document.getElementById(menuName).style.display = ''
        }
        function hm(menuName){
            dropDowns[menuName] = setTimeout(function(){
                document.getElementById(menuName).style.display = 'none'
            },50)
        }
    </script>

<div class="menu">
<div class="menuItem">
    <a href="#" onmouseover="sm('m1')" onmouseout="hm('m1')">
    <table width="150" height="20" border="0"><tr><td style="font-family: Verdana; font-size: 8pt;" align="center"><b>GROTTEN</b></td></tr></table></a>
    <div  id="m1" style="position:absolute;display:none; border-right:1px solid #000000;" onmouseover="sm(this.id)" onmouseout="hm(this.id)">

        <a href="#">PROFIL</a>
        <a href="#">GÆSTEBOG (0)</a>
        <a href="#">POST (1)</a>
        <a href="#">VENNER (0 online)</a>
        <a href="#">FILER</a>
        <a href="#">GALLERI</a>
        <a href="#">STATISTIK</a>

</div>
</div>
</div>

OG her Css'en :

.menu a {
    display:block;
    background: url('bg1.jpg');
    width:150px;
    height:20px;
    color:#000000;
    font-family:verdana;
    font-size:8pt;
    text-align:center;
    text-decoration: none;
    border-left:1px solid #000000;
}


.menu a:hover{
    background: url('bg2.jpg');
    color: #000000;

}


.menu .menuItem {
        float:left;

}

Dette er meget vigtigt for mig, så håber der findes enr ar sjæl der har mdo på at hjælpe, og selvfølgelig modtage mine 200 points :)