Logo + Menú Fijo (ejemplo práctico)

Vamos a desarrollar un menú de navegación con un logo corporativo, la gracia es que ocuparemos todo lo aprendido hasta el momento, flotaciones, posiciones, colores, etc.

(artículo en desarrollo)

Html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Menú Ejercicio</title>
	<link rel="stylesheet" href="menu-ejercicio.css" type="text/css">
</head>
<body>
<nav>
	<div class="logo"><a href="#">Logo Empresa</a></div>
	<div class="menu">
		<ul>
			<li><a href="#">Inicio</a></li>
			<li><a href="#">Servicio</a></li>
			<li><a href="#">Productos</a></li>
			<li><a href="#">Contacto</a></li>
		</ul>
	</div>
</nav>
<div class="slider"></div>
</body>
</html>

Css

*{
	margin: 0;
	box-sizing: border-box;
}
nav{
	background-color: chocolate;
	overflow: hidden;
	width: 100%;
	text-align: center;
	height: 50px;
	position: fixed;
}
.logo{
	float: left;
	width: 30%;
	background-color: #999;
	height: 100%;
}
.logo a{
	text-decoration: none;
	color:#fff;
	font-size: 40px;
	text-transform: uppercase;
}
.menu{
	float: right;
	width: 70%;
	height: 100%;
	background-color: #555;
}
.menu ul li{
	display: inline;
}
.menu ul{
	height: 100%;
	padding-top: 11px;
}
.menu a{
	text-decoration: none;
	color:#fff;
	text-transform: uppercase;
	font-size: 20px;
	margin-right: 20px;
	background-color: #000;
	padding: 100% 10px;
}
.menu a:hover{
	background-color: chocolate;	
}
.slider{
	width: 90%;
	margin: 0 auto;
	height: 2000px;
	background-color: #888;
}