Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style>
	body{
	background-color:gray;
	}

	#header{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:150px;
		background-color:#ff9966;
	}


	#head{
		margin-left:200px;
		font-size:35px;
		color:white;
		position:relative;
	}
	#menu{
		position:absolute;
		top: 60px;
		right:50px;
		color:white;
		float:right;
		font-size:23px;
	}


	<!--#menu ul li{
		position:relative;
		text-align:center;
		display:inline-block;
		width:100px;
		height:80px;
		background-color:#ff9966;
	}

	<!--#menu ul li:hover{
		background-color:#ff8c66;
		opacity:0.5;
	}


	#menu ul li:after{
		display:block;
		position:absolute;

		width:100px;
		height:0px;
		background-color:white;
		opacity:0;
		transition-property:all;
		transition-duration:1s;
	}

	#menu ul li:hover::after{
		height:10px;
		opacity:1;
	}
		-->

	div.menu1{
		display:inline-block;
		width:100px;
		height:60px;
		background-color:#ff9966;
		position:relative;
		}

	div.menu1:hover{
		background-color:#ff8c66;
		opacity:0.5;
	}

	div.menu1:after{
		display:block;
		position:absolute;
		width:100px;
		height:0px;
		background-color:white;
		opacity:0;
		transition-property:all;
		transition-duration:1s;
	}

	div.menu1:hover::after{
		height:10px;
		opacity:1;
	}
	h1{
		margin-left:150px;}


	</style>

</head>
<body>
	<div id="header">
		<p id="head">Aplikacje Internetowe</p>
		<div id="menu">
				<div class="menu1">Menu1</div>
				<div class="menu1">Menu2</div>
				<div class="menu1">Menu3</div>
				<div class="menu1">Menu4</div>
				<div class="menu1">Menu5</div>

		</div>


	</div>
	<div id="content">
		<h1> AKTUALNOŚCI</h1>

	</div>
	<div id="footer">

	</div>


</body>
</html>