menú deplegable con javascript

[RafaRG]

hola a todos. os comento: estoy haciendo una página con un enlace en la cabecera. al darle al enlace, se me despliega un menú con varios enlaces dentro. este es el código que he usado:

Código PHP:

  <!--EL SCRIPT-->
<script> 
function OTROID(enla , etik) { 
  obj = document.getElementById(etik); 
    obj.style.display = (obj.style.display == 'block') ? 'none' : 'block'; 
  enla.innerHTML = (enla.innerHTML == '<img src="PNG/engranaje.png" width=30 height=30 style="margin:4px;position:fixed;top:0px;right:0px;">') ? '<img src="PNG/engranaje.png" width=30 height=30 style="margin:4px;position:fixed;top:0px;right:0px;">' : '<img src="PNG/engranaje.png" width=30 height=30 style="margin:4px;position:fixed;top:0px;right:0px;">'; 
} 
</script>
<!--EL HTML-->
<a href="#" onclick="OTROID(this,'ID'); return false"><img src="PNG/engranaje.png" width=30 height=30 style="margin:4px;position:fixed;top:0px;right:0px;"></a>
    <div id="ID" class="menúengranaje" style="display:none">
        <ul id="enlacesmenúengranaje">
        <li><a href="#">Configuración</a>
        <li><a href="#">Cambiar tema</a>
        <li><a href="#">Ayuda</a>
        </ul>
    </div>
<!--EL CSS-->
<style type="text/css">
.menúengranaje {
    position:fixed; top:40px; right:0%;
    background-color:rgba(0,0,0,0.2);
    border-radius:5px;
    padding:4px;
    }
#fondomenúengranaje {
    background-color:rgba(0,0,0,0.5);
    padding:5px;
    border-radius:5px;
    }
#enlacesmenúengranaje {
    margin:0px;
    margin-left:-40px;
    list-style:none;
    }
#enlacesmenúengranaje li {
    margin:auto;
    padding:0px;
    }
#enlacesmenúengranaje a {
    display:block;
    border:5px solid white;
    padding:5px;
    font-family:segoe ui;
    font-size:13px;
    background-color:white;
    }
#enlacesmenúengranaje a:hover {
    border:5px solid white;
    background-color:blue;
    color:white;
    }
</style> 
  

como veis, hay varias partes: script, html y css. el código funciona perfectamente. pero para hacer que el menú se oculte, tengo que volver a darle al enlace que lo muestra. mi pregunta es, ¿se puede modificar el código de alguna manera de modo que el menú se oculte haciendo click fuera del menú?
si queréis un ejemplo, google lo tiene. en la cabecera, a la derecha, hay un botón de un engranaje, que al clicar muestra un menú y si haces click en cualquier parte del resto de la página, se oculta el menú. yo quiero implementar eso mismo.
un saludo