title: javascript menu, How to close when mouse outside of div?
body: <p>this is my first pure JavaScript script as you can probably tell, by the length of it! I'm at a loss to workout how i can get the child links which are in a div with a class called 'menu' to close when i leave that div. 
  I've tried to write an If argument to set it to close when i leave the 'A' and also a 'DIV' and that doesn't seem to work?
  Any help would be much appreciated and sorry for the overly long code! 
  Please no Jquery for now, thanks!</p>
  
  <pre><code>&lt;script&gt;
      // Variables
      var getFirstMenu = document.getElementsByTagName('div');
      // Use selectors
      var getMenuClasses = document.getElementsByClassName('menu');
      // Hide drop down menus
      for(var i=0; i &lt; getFirstMenu.length; i++){
        getFirstMenu[i].style.visibility = 'hidden';
      }
      // =============================
      // Show Menu on mouseover
      function showDropdown(e){
       var el = e.target;
      if(el.nodeName == 'A'){
          for(var i = 0; i &lt; getMenuClasses.length; i++) {
            if(el == getMenuClasses[0]){
              getFirstMenu[0].style.visibility = 'visible';
            }else if(el == getMenuClasses[1]) {
               getFirstMenu[1].style.visibility = 'visible';
            }else if(el == getMenuClasses[2]){
              getFirstMenu[2].style.visibility = 'visible';
            }
          }
        }
      }
      var getMainMenu = document.getElementById('menu');
      getMainMenu.addEventListener('mouseover', function(e){
          showDropdown(e);
      },false);
  
      // =============================
      // Hide Menu on mouseout
      function mouseOutMenu(e){
       var el = e.target;
        if(el.nodeName == 'DIV')
          for(var i = 0; i &lt; getFirstMenu.length; i++){
          getFirstMenu[i].style.visibility = 'hidden';
            }
      }
      getMainMenu.addEventListener('mouseout', function(e){
        mouseOutMenu(e);
      }, false);
  </code></pre>