
/*Todos las etiquetas ul tendran
las siguientes propiedades*/
li {
	/*Quitamos los estilos de las listas*/
	list-style: none;
}


/*Todas las etiquetas h1 tendran
las siguientes propiedades*/
h1 {
	/*Text centrado*/
	text-align: center;
	/*Color de la letra blanco*/
	color: white;
}

.menu li a {
	/*Color de la letra blanco*/
	color: white;
        font-family: arial;
	/*Un relleno de 12 de alto
	y 10 de ancho */
	padding: 12px 10px;
	/*Color del entorno negro*/
	background: black;
	/*Convertir en bloque (ya que
	la etiqueta a es lineal)*/
	display: block;
	/*La decoracion de la etiqueta (es
	un subrayado) estara desabilitada*/
	text-decoration: none;
}

/*Todas las etiquetas li que estan directos
dentro de la clase manu, van a tener las
siguientes preopiedades*/
.menu > li {
	/*Para acomodar todos los bloques a
	la izquierda*/
	float: left;
}

/*Todas las etiquetas ul que estan dentro de
una etiqueta li y que esta misma este dentro
de una clase llamada menu. Van a tener
las siguientes propiedades*/
.menu li ul {
	/*El bloque va a desaparecer*/
	display: none;
	/*Tendra una posicion absoluta*/
	position: absolute;
}

/*Al pasar el puntero por la etiqueta a
y que esta este dentro de una etiqueta li
y que a su ves esten dentro de una clase
llamada menu. Van a tener las siguientes
propiedades.*/
.menu li a:hover {
	/*Su color de de relleno sera #434343*/
	background: #434343;
}

/*Todas las etiquetas ul que estan directos
dentro de la etiqueta li y a su ves estan
dentro de la clase menu tendran las
siguientes caracteristicas.*/
/*Ademas, la etiqueta li al ser seleccionadas*/
.menu li:hover > ul {
	/*Los bloques del submenu apareceran*/
	display: block;
}

/*La clase encabezado tendra las siguientes
propiedades*/
.encabezado {
	/*Un relleno de 20px alrededor del
	contenido*/
	padding: 20px;
	/*El relleno tendra un color
	de rgba(0,0,0,1)*/
	background: rgba(0,0,0,1);
}

/*La clase menu tendra las siguientes
propiedades*/
.menu {
	/*El overflow sirve para resolver
	el contenido excedente que genera
	el float (el que usamos para desplazar
	todos los bloques a la derecha)*/
	overflow: hidden;
}