Navegador horizontal retrátil

index.html

<nav class="box-nav">
	<div class="nav">
		<ul>
			<li><a href="#">Inicio</a></li>
			<li><a href="#">Sobre</a></li>
			<li><a href="#">Contato</a></li>
		</ul>
	</div>
	<div class="btn"><p>Menu</p></div>
</nav>
<section class="page-content">
	conteudo do site
</section>

style.css

/*
	Navegador horizontal retrátil
*/
 
* {margin: 0; padding: 0;text-decoration: none;}
.box-nav {	
	position: absolute;
	z-index: 10;
	width: 100%;
	background: rgba(000,000,000,0.6);
	margin-top: -36px;
	-webkit-transition-duration: 0.3s;	    
	    -moz-trasition-duration: 0.3s;
	      -o-trasition-duration: 0.3s;
}
.box-nav:hover {
	margin-top:0;
}
.box-nav ul li {
	display: inline;
}
.box-nav a {
	font-weight: bold;
	color: #333;
	list-style: none;
	background: orange;
	padding: 2px 6px;
	margin-right:3px;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	   -moz-box-shadow: 1px 1px 3px #333;
	-webkit-transition-duration: 0.3s;
	    -moz-trasition-duration: 0.3s;
	      -o-trasition-duration: 0.3s;
 
}
.box-nav a:hover {
	padding: 2px 16px;
	background: orangered; 
	color: white;
}	
.nav {
	padding: 8px 10px;
}
.btn {
	clear: both;
	background: rgba(000,000,000,0.4);
 
}
.btn p {
	color: white;
	font-weight: bold;
	text-align: center;
}
.page-content {
	position:absolute;
	z-index: 0;
	margin-top: 20px;
}