I have a table that display users in a database. When a user clicks on the usergroup a dropdown div will appear with a selection of available usergroups. I would like that div to hide again when the user clicks outside that div

here is the code for the div

HTML Code:
<tr id='10003'>

<td><a href='index.php?frame=main&m=member&a=edituser&id=10003'>tstUser-0</a></td>
	<td>	
		<div class='container'>
		<span id='usergroup-10003' class='user-ajax-hover'>Registered Users</span>
		<div id='ugselect-10003' class='userpopup'>
			<h4>Change Usergroup</h4>
			<ul>
			<li><a href='#' id='4'>Administrators</a></li>
<li><a href='#' id='3'>Moderators</a></li>
<li><a href='#' id='2'>Registered Users</a></li>
</ul>
		</div>
		</div>
I have no problem displaying the hidden div but i can't get it to close when the user clicks outside.

Any ideas?