We have a lighting component that we are using on a mobile page.  On the page I have a menu that opens when a icon is clicked, however it stays open until a option is choses or the icon is clicked again.  I need to close it whenever the user click anywhere else on the screen.  How can I accomplish that?

The menu code is below.

<div class="slds-col colPadding" id='menuButton'>
<div class="moreButton">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
<lightning:icon iconName="action:more" size="small" alternativeText="more" class="moreIcon" onclick="{!c.showHideMore}" />
<div class="slds-dropdown slds-dropdown_right" id="dropDown" style="{!v.showHide}">
<ul class="slds-dropdown__list" role="menu" aria-label="Show More">
<li class="slds-dropdown__item" role="presentation" style="width:160px" >
<a onclick="{!c.pageRedirect}" role="menuitem" tabindex="0" id="walletshare">
<span class="slds-truncate" title="Show Walletshare">Show Walletshare</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation" style="width:160px" >
<a onclick="{!c.pageRedirect}" role="menuitem" tabindex="-1" id="call">
<span class="slds-truncate" title="Log A Call">Log A Call</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation" style="width:160px" >
<a onclick="{!c.pageRedirect}" role="menuitem" tabindex="-1" id="event">
<span class="slds-truncate" title="Log A Meeting">New Event</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation" style="width:160px" >
<a onclick="{!c.pageRedirect}" role="menuitem" tabindex="-1" id="task">
<span class="slds-truncate" title="New Task">New Task</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation" style="width:160px" >
<a onclick="{!c.pageRedirect}" role="menuitem" tabindex="-1" id="advisor">
<span class="slds-truncate" title="Advisor Profile">Advisor Profile</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation" style="width:160px" >
<a onclick="{!c.pageRedirect}" role="menuitem" tabindex="-1" id="retirement">
<span class="slds-truncate" title="Retirement Profile">Retirement Profile</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>