Simple menu déroulant problème de clic

Bonjour,
Voilà j'ai créer avec mes propres connaissance de ce que je connais un peu en JS, un petit script qui permet de faire un menu déroulant quand on clique sur un bouton. Voici le code JS :

<script type="text/javascript">
function afficheMenu(obj){
    
    var idMenu     = obj.id;
    var idSousMenu = 'sous' + idMenu;
    var sousMenu   = document.getElementById(idSousMenu);
    
    /*****************************************************/
    /** si le sous-menu correspondant au menu cliqué    **/
    /** est caché alors on l'affiche, sinon on le cache **/
    /*****************************************************/
    if(sousMenu.style.display == "none"){
        sousMenu.style.display = "block";
    }
    else{
        sousMenu.style.display = "none";
    }
    
}     
</script>

Mais j'ai un problème, j'aimerais que le menu se ferme aussi quand je clique ailleurs sur la page et non pas obligatoirement sur le bouton pour fermer le menu déroulant.
Comment faire ?

Code HTML :

<div id="menu">
    <div class="menu" id="menu1" onclick="afficheMenu(this)">
        <a href="#">Cliquez-moi</a>
    </div>
    <div id="sousmenu1" style="display:none">
        <div class="sousmenu">
            <a href="#">Sous-Menu 1.1</a>
        </div>
        <div class="sousmenu">
            <a href="#">Sous-Menu 1.2</a>
        </div>
        <div class="sousmenu">
            <a href="#">Sous-Menu 1.3</a>
        </div>
        <div class="sousmenu">
            <a href="#">Sous-Menu 1.4</a>
        </div>
    </div>

</div>

Merci d'avance.