function showSubMenu(id){
  var yOffset = -3;
  var xOffset = 0; // Based on a border of 3px  plus the butlft in the CSS definition
  var widthPadding = 0; // Based on width of button images (butlft and butrgt) in CSS
  var menuElement = document.getElementById(id);
  
  var pos = getElementPos(menuElement.parentNode);
  menuElement.style.top = pos[1] + yOffset + menuElement.parentNode.offsetHeight + "px";
  menuElement.style.left = pos[0] + xOffset + "px";
  //menuElement.style.width = menuElement.parentNode.offsetWidth + widthPadding + "px";
  menuElement.style.visibility="visible";
}

function hideSubMenu(id){
  var menuElement = document.getElementById(id);
  menuElement.style.visibility="hidden";
}

function getElementPos(element) {
   var xOffset = yOffset = 0;

   while (element != null) { // Loop thru parent elements till we get to the top node
     xOffset += element.offsetLeft;
     yOffset += element.offsetTop;
     element = element.offsetParent;
   }
   return [xOffset, yOffset];
}
