Untitled

<!DOCTYPE html>
	<html>

			<head>
				<title> menu </title>
				<meta charset="utf-8">
				<link rel="stylesheet" type="text/css" href="style.css">
			</head>


			<body>
				<nav>
					<ul>
						<li> <a href="#"> O NAS </a>
							<ul>
								<li> <a href="#"> INFORMACJE </a> </li>
								<li> <a href="#"> KONTAKT </a> </li>

							</ul>
						</li>

						<li> <a href="#"> PROJEKTY </a>
							<ul>
								<li> <a href="#"> PROJEKT 1 </a></li>
								<li> <a href="#"> PROJEKT 2 </a></li>
								<li> <a href="#"> PROJEKT 3 </a></li>
							</ul>
						</li>

						<li> <a href="#"> GALERIA </a>
							<ul>
								<li> <a href="#"> 1 </a></li>
								<li> <a href="#"> 2 </a></li>
								<li> <a href="#"> 3 </a></li>
							</ul>
						</li>

						<li> <a href="#"> KONTAKT </a></li>

					</ul>


				</nav>

		</body>


	</html>
css
* {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

body {
		font-family: 'arial';
		background-color: lightblue;
}

nav li {
		 display: inline-block;

}


nav ul {
	background-color: #4577ED;
	text-align: center;
}


nav ul li a {
			display: block;
			width: 150px;
			height: 50px;
			line-height: 50px;
			text-decoration: none;
			color: white;
			padding: 0px 10px;
}


nav ul li:hover {
	background-color: #3255a7;
}

nav ul li ul li {
		display: block;
}

nav ul li ul {
		display: none;
		position: absolute;
}

nav li:hover ul {
	display: block;
	background-color: #4577ED;
}