php - Hide the menu when clicking outside it -

i have html menus, show when user clicks on head of these menus. hide these elements when user clicks outside menus' area clicking on myaccount section again.

here 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 me this.

you have remember state of menu first, set var open = true when open. make function 'toggles' , bind onclick event of menu-head. either bind closemenu function on onclick event directly whole document or on onmouseout menu (you can build delay here).