O nosso conhecido DropDown, porém abrindo com um click na LI, e fechando com um click ‘fora’.

Note que esse clique fora, quer dizer clicar em tudo oque não seja o menu. Logo, o elemento que temos de cara para isso, é o body. Convém lembrar, que os eventos em javascript propagam de filho para pai.

Sendo assim, um click no menu, dispara também um click no body.

Por isso, que uso ali, o método .stopPropagation(), pois qndo eu clicar no #menu li(para abrir o sub especifico), não quero que seja disparado o click do body(que fecha os subs).

Bom, é isso, o código está simples e é auto explicativo.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
	var uls = $('#menu ul');
	uls.hide();

	$('#menu > li').click(function( e ){
		e.stopPropagation();
		uls.hide();
		$( this ).find('ul').show();
	});
	$('#menu ul').click(function( e ){
		e.stopPropagation();
	});
	$('body').click(function(){
		uls.hide();
	});
});
</script>
<style type="text/css">
* { list-style: none; }
html, body { height: 100%; }
body { font: 12px/12px Tahoma, sans-serif; color: #666; }
#main { min-height: 100%; }
#menu { height: 30px; }
#menu li {
	position: relative;
	float: left;
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	border: 1px solid #666;
}
#menu ul {
	position: absolute;
	top: 30px;
	left: -1px;
	border: 1px solid #666;
	background: #fff;
}
#menu li li {
	width: 200px;
	border: none;
}
</style>
</head>
<body>
<div id="main">
	<ul id="menu">
		<li>Abrir sub 1
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
			</ul>
		</li>
		<li>Abrir sub 2
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</li>	
	</ul><!-- /menu -->
</div><!-- /main -->
</body>
</html>

Demonstração

é isso ai. Comente se te ajudou, ou se tiver alguma dúvida/sugestão.