Untitled

<!DOCTYPE html>
<html>
<title>Archiwum Margonem</title>
<meta charset="UTF-8">
<style>
	body {
		background-color: #2E3440;
	}
</style>
	<style type="text/css">
		nav{
			width: 1200px;
			height: 100px;
			background: #474747;
			margin: 1px auto;
			position: relative;
		}
		.logo{
			width: 450px;
			float: left;

		}
		.logo h1{
			font-weight: normal;
			font-size: 40px;
			margin: 0px;
			padding: 20px 40px;
			color: white;
		}
		.nav-menu{
			width: 700px;
			float: left;
		}
		.nav-menu ul li{
			list-style: none;
			float: left;
			margin: 20px;
		}
		.nav-menu ul li a {
			text-decoration: none;
			color: white;
		}
		.nav-menu ul li a:hover{
			color: #959595;
		}
		.nav-menu ul li ul{
			width: 1000px;
			height: 0px;
			position: absolute;
			left: 158px;
			top: 105px;
			background: #474747;
			overflow: hidden;
			transition: 0.5s;
		}
		.nav-menu ul li ul li{
			width: 100px;
		}
		.nav-menu ul li ul li a{
			font-weight: normal;
			font-size: 20px;
			border-bottom: 2px solid;
		}
		.nav-menu ul li ul li ul{
			width: 150px;
			height: 200px;
			position: relative;
			left: -50px;
			top: 2px;
		}
		.nav-menu ul li ul li ul li{
			margin: 10px;
			color: #959595;
		}
		.nav-menu ul li:hover ul{
			height: 300px;
			top: 101px;
		}
		.nav-menu ul li:hover ul li ul{
			top: 2px;
		}

	</style>
</head>
<body>
	<nav>
		<div class="logo"><h1><a href="Margonem.html" style="color: #959595">Archiwum</a></h1></div>
		<div class="nav-menu">
			<ul>
				<li><a href="Margonem.html">Strona główna</a></li>
				<li><a href="#">Stroje &#11167;</a>
					<ul>
						<li><h1><a href="Stroje indywidualne.html">Stroje indywidualne</a></h1></li>
						<li><h1><a href="Stroje klanowe.html">Stroje klanowe</a></h1></li>
					</ul>
				</li>
				<li><a href="#">Przedmioty &#11167;</a>
					<ul>
						<li><h2>Hełmy</h2>
							<ul>
								<li>Zwykłe</li>
								<li>Unikatowe</li>
								<li>Heroiczne</li>
								<li><a href="leghelmy.html">Legendarne</a></li>
							</ul>
						</li>
						<li><h2>Pierścienie</h2>
							<ul>
								<li>Zwykłe</li>
								<li>Unikatowe</li>
								<li>Heroiczne</li>
								<li><a href="legpier.html">Legendarne</a></li>
							</ul>
						</li>
						<li><h2>Naszyjniki</h2>
							<ul>
								<li>Zwykłe</li>
								<li>Unikatowe</li>
								<li>Heroiczne</li>
								<li><a href="legnasz.html">Legendarne</a></li>
							</ul>
						</li>
						<li><h2>Rękawice</h2>
							<ul>
								<li>Zwykłe</li>
								<li>Unikatowe</li>
								<li>Heroiczne</li>
								<li><a href="legrece.html">Legendarne</a></li>
							</ul>
						</li>
						<li><h2>Zbroje</h2>
							<ul>
								<li>Zwykłe</li>
								<li>Unikatowe</li>
								<li>Heroiczne</li>
								<li><a href="legzbr.html">Legendarne</a></li>
						<li><h2>Buty</h2>
							<ul>
								<li>Zwykłe</li>
								<li>Unikatowe</li>
								<li>Heroiczne</li>
								<li><a href="legbut.html">Legendarne</a></li>
							</ul>
						</li>
					</ul>	
				</li>
			</ul>
			</ul>

		</div>
	</nav>

</body>
</html>
Editor is loading...