menu af hrefs der viser divs

Jeg har lavet hovedmenupunkter som almindelige hrefs og når man har OnMouseOver så viser den en div under med underliggende menupunkter. Jeg har i div´en lavet en OnMouseOut som også virker fint, når jeg går fra diven og ud på siden. Mit problem er at hvis jeg går fra et menupunkt til et andet menupunkt så aktiverer den ikke OnMouseOut, dvs. det menupunkt jeg var på er stadig aktiveret selv om jeg er på et andet.

Javascript funktion
----

<script language='JavaScript'>
    var counter = 0;
   
    function show(id) {
              document.getElementById(id).style.display='block';
              clearTimeout(counter);
    }
    function hide(id) {
        document.getElementById(id).style.display='none';
    }
</script>

Div
----
<div style="left: 325px; " class="dropdown" id="div_products" OnMouseOver="show('div_products');" OnMouseOut="counter=setTimeout('hide(\'div_products\')',100)" >
    {foreach from=$products item='product'}<a class="menulink" style="padding-left: 0px; font: normal 12px verdana;" href="products.php">{$product.menu_name}</a><br />{/foreach}
</div>


Menupunkt
-----
<a OnMouseOver="show('div_products');" OnMouseOut="counter=setTimeout('hide(\'div_products\')',10)" class="menulink" href="index.php">Produkter</a>

Hvordan løser jeg dette problem?