NavBar

index.html

<nav>
	<ul id="links">
		<li><a href="#">Lorem.</a></li>
		<li><a href="#">Consequuntur.</a></li>
		<li><a href="#">Reiciendis.</a></li>
		<li><a href="#">Qui.</a></li>
		<li><a href="#">Necessitatibus!</a></li>
	</ul>
</nav>

navbar.markdown

NavBar

A Pen by Anon Ymous on CodePen.

License.

style.css

@import url("https://fonts.googleapis.com/css2?family=Georama&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Georama:wght@700&display=swap");

* {
	font-family: Georama;
	font-weight: 400;
}

body {
	margin: 0;
}

b,
strong {
	font-weight: 700;
}

#links a {
	display: block;
}

#links {
	background: linear-gradient(360deg, rgba(2,0,36,1) 0%, rgba(82,97,159,1) 36%, rgba(0,212,255,1) 100%);
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	border-top-style: solid;
	border-bottom-style: solid;
	border-color: gray;
}

#links li {
	float: left;
}

#links li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	border-right-style: solid;
	border-width: 2px;
	border-color: gray;
	font-weight: 700;
}

#links li a:hover {
	background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(82,98,159,1) 75%, rgba(0,212,255,1) 100%);

/* 	background-color: #111; */
}