title: How to supplement the script so that the menu is hidden by a click outside it?
body: <p>Now the menus are opened and hidden by clicking on the link.   </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getposOffset(overlay, offsettype){
  var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
  var parentEl=overlay.offsetParent;
  while (parentEl!=null){
  totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
  parentEl=parentEl.offsetParent;
  }
  return totaloffset;
  }
  
  function overlay(curobj, subobjstr, opt_position) {
  if (document.getElementById){
  var subobj=document.getElementById(subobjstr)
  subobj.style.display=(subobj.style.display!="block")? "block" : "none"
  
  var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" &amp;&amp; opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 
  var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" &amp;&amp; opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
  subobj.style.left=xpos+"px"
  subobj.style.top=ypos+"px"
  return false
  }
  else
  return true
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {font: normal 12px arial; margin: 0 20px 0 0;}
  a:hover {text-decoration: none;}
  .menu {position: absolute; display: none; background: cornsilk; padding: 4px; margin: 2px 0; border: 1px solid silver; font: normal 11px arial;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" onClick="return overlay(this, 'menu1', 'leftbottom')"&gt;link1&lt;/a&gt;
  &lt;a href="#" onClick="return overlay(this, 'menu2', 'leftbottom')"&gt;link2&lt;/a&gt;
  &lt;a href="#" onClick="return overlay(this, 'menu3', 'rightbottom')"&gt;link3&lt;/a&gt;
  
  &lt;div id="menu1" class="menu"&gt;menu1&lt;/div&gt;
  &lt;div id="menu2" class="menu"&gt;menu2&lt;/div&gt;
  &lt;div id="menu3" class="menu"&gt;menu3&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/Ar7en/z4upnw85/" rel="nofollow noreferrer">jsfiddle example</a>  </p>
  
  <p><strong>How to additionally hide the menu by clicking outside it?</strong>
  Thank you.</p>