•  
     

Menu em css e html - Abre com clique e fecha ao clicar fora

Menu em css e html base javascript

Código: Selecionar todos

<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>