/*
<style>
div {display: none; position: absolute; width: auto; height: auto}
</style>
<table>
  <tr>
    <td>
<a id="menu0" href="#" onMouseOver="showSubmenu('menu0', 1)" onMouseOut="showSubmenu('menu0', 0)">click me</a>
<div id="submenu0">
<a href="/" onMouseOver="showSubmenu('menu0', 1)" onMouseOut="showSubmenu('menu0', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu0', 1)" onMouseOut="showSubmenu('menu0', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu0', 1)" onMouseOut="showSubmenu('menu0', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu0', 1)" onMouseOut="showSubmenu('menu0', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu0', 1)" onMouseOut="showSubmenu('menu0', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu0', 1)" onMouseOut="showSubmenu('menu0', 0)">gfhfgh</a><br>
</div>
    </td>
    <td>
<a id="menu1" href="#" onMouseOver="showSubmenu('menu1', 1)" onMouseOut="showSubmenu('menu1', 0)">click me</a>
<div id="submenu1">
<a href="/" onMouseOver="showSubmenu('menu1', 1)" onMouseOut="showSubmenu('menu1', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu1', 1)" onMouseOut="showSubmenu('menu1', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu1', 1)" onMouseOut="showSubmenu('menu1', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu1', 1)" onMouseOut="showSubmenu('menu1', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu1', 1)" onMouseOut="showSubmenu('menu1', 0)">gfhfgh</a><br>
<a href="/" onMouseOver="showSubmenu('menu1', 1)" onMouseOut="showSubmenu('menu1', 0)">gfhfgh</a><br>
</div>
    </td>
  </tr>
</table>
*/
var timeout;

function showSubmenu(elemID, act) {
    var delay = 200; // время задержки в мсек
    var menu_prefix = 'menu'; // идентификатор меню
    var submenu_prefix = 'sub'; // идентификатор подменю
    
    // обнуляем прошлый таймаут
    if (timeout) {
        clearTimeout(timeout);
    }
    // если показываем подменю
    if (act === 1) {
        // предварительно закрываем все подменю
        counter = 0;
        while (document.getElementById(menu_prefix + counter)) {
            hideSubmenu(submenu_prefix + menu_prefix + counter);
            counter++;
        }
        // определяем позицию блока подменю
        submenuId = submenu_prefix + elemID;
        elemPos = getElementPosition(elemID);
        elemLeft = elemPos.left;
        elemTop = elemPos.top;
        elemTop += 32;
        // присваиваем блоку подменю видимость и координаты
        if (document.getElementById(submenuId)) {
            document.getElementById(submenuId).style.left = elemLeft;
            document.getElementById(submenuId).style.top = elemTop;
            document.getElementById(submenuId).style.display = 'block';
        }
        return;
    }
    // если скрываем подменю
    if (act === 0) {
        timeout = setTimeout("hideSubmenu('" + submenu_prefix + elemID + "')", delay);
        return;
    }
}

function hideSubmenu(elemID) {
    if (document.getElementById(elemID)) {
        document.getElementById(elemID).style.display = 'none';
    }
}

function getElementPosition(elemID) {
    var offsetTrail = document.getElementById(elemID);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 &&
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return {left:offsetLeft, top:offsetTop};
}
