El selector nav
no muestra el color del background que quiero.
Estuve inspeccionando y dice que tiene 0px
de height, y no entiendo por qué.
/* Aqui comienza el codigo CSS*/
* {
margin: 0px;
padding: 0px;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#contenedor_principal {
width: 1200px;
border: 1px solid #ccc;
margin: 0px auto;
margin-top: 20px;
}
#header {
width: 100%;
height: 100px;
text-align: center;
background-color: rgb(0, 131, 174);
color: white;
line-height: 90px;
}
/*! REVISAR ALGO LE PASA */
nav {
background-color: #00ECFF;
}
#menu ul li {
display: block;
float: left;
margin: 5px;
padding: 15px;
line-height: 2px;
border-right: 1px solid #ccc;
}
.clearfix {
float: none;
clear: both;
}
#menu ul li a {
color: #444;
}
#menu ul li:hover {
background-color: blue;
}
#menu ul li:hover a {
color: white;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Ejercicio de CSS</title>
</head>
<!-- Body -->
<body>
<div id="contenedor_principal">
<!-- Header -->
<header id="header">
<h1>Ejercicio de CSS</h1>
</header>
<!-- Menu de navegacion -->
<nav id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Articulos</a></li>
<li><a href="#">Categorias</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<!-- Contenido principal -->
<main id="Principal">
<section>
<div class="clearfix">
</div>
<div>
<h2>Noticias de ultima hora</h2>
<p>Texto de prueba</p>
</div>
</section>
<aside>
</aside>
</main>
<!-- Pie de pagina -->
<footer>
<p>Todos los derechos reservados ©</p>
</footer>
</div>
</body>
</html>