我說一下大概的想法，你再依據實際的需求去作修正

簡單的說，當你 $('#popup').show() 時，你可以在body綁定一個click事件，點擊後 $('#popup').hide()。
例如:

<pre class="c" name="code">
var hidePopup = function(){
  $('#popup').hide();     
}
$('#popup').show(function(){
   $('body').bind('click',hidePopup);
})
$('#popup').hide(function(){
   $('body').unbind('click',hidePopup);
})

但是這種寫法，會讓點擊在$('#popup')的div時，一樣會消失，如果上面有link之類的，就永遠點不到。
所以可以再加上一個當游標移過去時，暫時解除掉body的click事件，等hoverout時，再加回去。

<pre class="c" name="code">
$('#popup').hover(function(){
     $('body').unbind('click',hidePopup);
},function(){
     $('body').bind('click',hidePopup);
})

我是覺得可以讓事件不要繼續傳遞下去就可以解決。例如：

<pre class="c" name="code">
<script>
$(document).ready(function(){
	$('#popup').hide();
	$('#show').click(function(e){
		$('#popup').show();
		e.stopPropagation();
		e.preventDefault();
	});
	$(document).click(function(){
		$('#popup').hide();
	});
	$('#popup').click(function(e){
		e.stopPropagation();
		e.preventDefault();
		return false;
	});
});
</script>

方法很多種啦...

（我在ff3.5, ie7, chrome, safari4上面測試過）