Javascript body OnClick
<p>I'm in the process of learning Javascript and I'm trying to create a simple dropdown menu. An example of my desired functionality can be seen on the google homepage in the top menu with the "more" and "settings" dropdown. Specifically when you click off the menu, the menu disappears.</p>

<p>What code do I need to place in the hideMenus function in Javascript to hide the visible uls when a click occurs anywhere on screen?</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;  

&lt;head&gt;  
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;  
&lt;title&gt;Untitled 1&lt;/title&gt;  

&lt;style type="text/css"&gt;  
a  
{  
    color:blue;  
}  

.info ul.submenu  
{  
    border: solid 1px #e0e0e0;  
    background-color: #fff;  
    position: absolute;  
    padding: 0;  
    z-index: 2;  
    display: none;  
}  

.info ul.submenu li  
{  
    display: block;  
    border-top: solid 1px #e0e0e0;  
    margin: 0px 10px 0 10px;  
}  

.info ul.submenu li a  
{  
    display: block;  
    padding: 7px 0px 6px 0;  
    color: #1177ee;  
    cursor:pointer;  
}  

&lt;/style&gt;  

&lt;script type="text/javascript"&gt;  

function hideMenus()
{
//TODO
}

function menu(id) {     
    var myLayer = document.getElementById(id);     

    myLayer.onblur = function() {       
        myLayer.style.display = 'none';   
    };   

    if (myLayer.style.display == "none" || myLayer.style.display == "") {     
        myLayer.style.display = "block";     
    } else {     
        myLayer.style.display = "none";     
    }     
}  

&lt;/script&gt;  
&lt;/head&gt;  

&lt;body onclick="hideMenus();"&gt;  
&lt;div class="info"&gt;     
     Some Text Boom A &lt;a  onclick="menu('id1');"&gt;Link&lt;/a&gt; | More text    
     &lt;a onclick="menu('id2');"&gt;Another Link&lt;/a&gt; | more text    
     &lt;ul id="id1" class="submenu"&gt;     
       &lt;li&gt;&lt;a href="dfhdfh"&gt;A1&lt;/a&gt;&lt;/li&gt;     
       &lt;li&gt;&lt;a href="aetjetjsd"&gt;A2 This is Long&lt;/a&gt;&lt;/li&gt;     
       &lt;li&gt;&lt;a href="etetueb"&gt;A3&lt;/a&gt;&lt;/li&gt;     
     &lt;/ul&gt;     
    &lt;ul id="id2" class="submenu"&gt;     
       &lt;li&gt;&lt;a href="dfhdfh"&gt;B1&lt;/a&gt;&lt;/li&gt;     
       &lt;li&gt;&lt;a href="aetjetjsd"&gt;B2&lt;/a&gt;&lt;/li&gt;     
       &lt;li&gt;&lt;a href="etetueb"&gt;B3&lt;/a&gt;&lt;/li&gt;     
     &lt;/ul&gt;     
  &lt;/div&gt;    
&lt;/body&gt;  
&lt;/html&gt;   
</code></pre>

<p>I do not want to use jQuery.</p>
