menuIsOpen = false;

function showMenu(el) {
  closeMenu();
  mySubmenu = el.parentNode.getElementsByTagName("ul")[0];
  if (typeof mySubmenu != 'undefined')
  {
     mySubmenu.style.display = "block";
     mySubmenu.style.left = el.offsetLeft + "px";
     //console.log(el.parentNode.offsetLeft);

     ox = el.parentNode.offsetLeft;
     oy = 0;
     el = document.getElementById("mainmenue").getElementsByTagName("ul")[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("mainmenue").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;