menuIsOpen = false;

function showMenu(el) {
  closeMenu();
  mySubmenu = el.parentNode.getElementsByTagName("ul")[0];
  mySubmenu.style.display = "block";
  mySubmenu.style.left = el.offsetLeft + "px";

  el = document.getElementById("head").getElementsByTagName("ul")[0];
  ox = 0;
  oy = 0;
  while (el) {
    ox +=  el.offsetLeft;
    oy +=  el.offsetTop;
    el = el.offsetParent;
  }

  // ueberwachungsbereich einrichten
  // wenn die maus den bereich verlaesst, wird das menue zugeklappt
  ueberwachungLeft = mySubmenu.offsetLeft +ox;
  ueberwachungTop = oy - 10;
  ueberwachungRight = ueberwachungLeft + mySubmenu.offsetWidth;
  ueberwachungBottom = ueberwachungTop + mySubmenu.offsetHeight + 60;
  menuIsOpen = true;
}

function closeMenu() {
  mySubmenues = document.getElementById("head").getElementsByTagName("ul")[0].getElementsByTagName("ul");
  for (i=0; i<mySubmenues.length;i++) {
    mySubmenues[i].style.display = "none";
  }
  menuIsOpen = false;
}

function mausMovePos(ereignis) {
  if (menuIsOpen == true) {
    posx = document.all ? window.event.clientX + document.documentElement.scrollLeft : ereignis.pageX;
    posy = document.all ? window.event.clientY + document.documentElement.scrollTop : ereignis.pageY;
    if (posx < ueberwachungLeft || posx > ueberwachungRight || posy < ueberwachungTop || posy > ueberwachungBottom) {
      closeMenu();
    }
  }
}

document.onmousemove = mausMovePos;