[JavaScript] Div jako kilkalne menu rozwijane Opcje

[!*!]

Założyłem już podobny temat w innym dziale, jednak nie uzyskałem odpowiedzi, a nie mogę go tam edytować.

Może źle się wyraziłem. Chodzi mi o uzyskanie efektu pojawiania się "menu" np. diva po kliknięciu na jakiś link, jak kliknę go jeszcze raz to div zostanie ukryty, lub jeśli kliknę (gdy jest otwarty) w dowolną cześć ekranu strony to zostanie on ukryty.

Jako przykład mogę podać główną stronę google, zakładka u góry "więcej" oraz menu na facebooku "konto".

Jeśli jest to naruszenie regulaminu prosiłbym o skasowanie tego tematu. Jednak zależy mi na nakierowaniu czego konkretnie mam szukać. Pod hasłem "menu rozwijane" owszem są takie motywy, jednak nie są one zamykane poprzez kilknięcie w dowolną cześć strony po otworzeniu. I właśnie nie wiem jak taki mechanizm uzyskać.

[!*!]

Struktura wygląda tak:

[HTML] pobierz, plaintext 
<div id="m1">
<p onclick="activetab(1);">Menu 1</p>
<ul>
<li>File</li>
<li>Edit</li>
</ul>
</div>
 
<div id="m2">
<p onclick="activetab(2);">Menu2</p>
<ul>
<li>Opera</li>
<li>Fx</li>
</ul>
</div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
function activetab(e){
 
maxtab =3;
tab = document.getElementById('m'+e);
if(tab.getElementsByTagName('ul')[0].style.display == 'block'){
tab.getElementsByTagName('ul')[0].style.display = 'none';
} else {
  for(i=1; i<=maxtab; i++){
    if(i==e){
      tab.setAttribute("class","selected");
      tab.getElementsByTagName('ul')[0].style.display = 'block';
    } else {
       document.getElementById('m'+i).setAttribute("class","");
       document.getElementById('m'+i).getElementsByTagName('ul')[0].style.display = 'none';
       }
 }
}
}
[JAVASCRIPT] pobierz, plaintext 

I chodzi o ukrycie listy UL gdy jest ona widoczne (display:block) w przypadku gdy kilkne poza jej obszarem, na stronie w dowolnym miejscu. Właśnie nie wiem co mam dodać tzn. jak dodać do body taką opcje.

Link do formy obecnej