I have multiple menues on my page...

<div class="menu">
   <div>Menu header</div>
   <div>Menu content</div>// should hide on click outside .menu
</div>

<div class="menu">
   <div>Menu header</div>
   <div>Menu content</div>// should hide on click outside .menu
</div>

basically i need all the menu(s) to hide when a click is detected unless someone is clicking any of the menues it should hide any other menu(s) apart from the menu they clicked on.

I have seen a few that work but only if you have one menu on the page which is not exactly useful using stopPropagation as it may cancel any other necessary instructions;

any ideas would be appriciated.