Hide the menu when clicking outside it
<p>I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus' area as well as clicking on myaccount section again.</p>

<p>Here is the code,</p>

<pre><code>&lt;li onclick="san()"&gt;
&lt;div id="topnav"&gt;&lt;a id="displayText" href="#" class="signin"&gt;My Acount&lt;/a&gt;&lt;/div&gt;
&lt;div id="topnav1" style="display:none;"&gt;&lt;a id="displayText1" href="#"&gt;My Acount&lt;/a&gt;&lt;/div&gt;
&lt;/li&gt;

    &lt;div id="signin_menu" style="display:none;"&gt;
            &lt;div class="droptop"&gt;&lt;/div&gt;
            &lt;div class="maindropsign"&gt;
                        &lt;div class="header_box"&gt;My Acount&lt;/div&gt;
                        &lt;div class="txt_drop"&gt;&lt;a href="#"&gt;My Profile&lt;/a&gt;&lt;/div&gt;
                        &lt;div class="txt_drop"&gt;&lt;a href="#"&gt;My Backer History&lt;/a&gt;&lt;/div&gt;
                        &lt;div class="txt_drop"&gt;&lt;a href="#"&gt;Edit Settings&lt;/a&gt;&lt;/div&gt;
                        &lt;div class="txt_drop_log"&gt;&lt;a href="#"&gt;Log Out&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="dropbut"&gt;&lt;/div&gt;
  &lt;/div&gt;

&lt;script language="javascript"&gt; 
function san() 
{
    if(document.getElementById('signin_menu').style.display=='')
    {
    document.getElementById('signin_menu').style.display='none';
    document.getElementById('topnav1').style.display='none';
    document.getElementById('topnav').style.display='';
    }
    else
    {
    document.getElementById('signin_menu').style.display='';
    document.getElementById('topnav1').style.display='';
    document.getElementById('topnav').style.display='none';
    }

} 
&lt;/script&gt;
</code></pre>

<p>Please help me to do this. </p>
