Hide the menu when clicking outside it

Question

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.

Here is the code,

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

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

<script language="javascript"> 
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';
    }

} 
</script>

Please help me to do this.

Answer 1

You have to remember the state of the menu first, like set var open = true when its open. Then make a function that 'toggles' and bind that to the onClick event of your menu-head. Then either bind a closeMenu function on an onClick event directly to your whole document or on an onMouseOut from your menu (you can even build a delay here).