javascript menu, How to close when mouse outside of div?

Question

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!

<script>
    // Variables
    var getFirstMenu = document.getElementsByTagName('div');
    // Use selectors
    var getMenuClasses = document.getElementsByClassName('menu');
    // Hide drop down menus
    for(var i=0; i < 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 < 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 < getFirstMenu.length; i++){
        getFirstMenu[i].style.visibility = 'hidden';
          }
    }
    getMainMenu.addEventListener('mouseout', function(e){
      mouseOutMenu(e);
    }, false);

Answer 1

Add a Handler to the document-object

document.addEventHandler('mouseover', function(){
   // close it
}, false);

Or when this is about to hide a submenu: Add the handler to the menu which then hides the menu on mouseover

Answer 2

Look Demo Code :

        // Variables
        var getFirstMenu = document.getElementsByTagName('div');
        // Use selectors
        var getMenuClasses = document.getElementsByClassName('menu');
        // Hide drop down menus
        for(var i=0; i < 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 < 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 == 'A')
            for(var i = 0; i < getFirstMenu.length; i++){
            getFirstMenu[i].style.visibility = 'hidden';
              }
        }
for(var i = 0; i < document.getElementsByTagName('div').length; i++){
      document.getElementsByTagName('div')[i].addEventListener('mouseout', function(e){
          mouseOutMenu(e);
        }, false);
              }