JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<nav id="menu">
			<ul>
				<li><a href="solucao.html" title="">SOLUÇÕES</a></li>
				<li><a href="#" title="">SOBRE NÓS</a></li>
				<li><a href="#" title="">PORTFÓLIO</a></li>
				<li><a href="#" title="">FALE CONOSCO</a></li>
			</ul>
		</nav>

	</header>

CSS

*, html, body {
	margin:0;
	padding:0;
	box-sizing: border-box;
	}
body {
  background: #333;
	width: 100%;
	height: 100vh;
}
header {
	background-color: rgba(255,255,255,0);
	color: #3C3C3C;
	height: 30vh;
	border-bottom: 1px solid rgba(194,194,194,0.5);
}
header h1 {
	float: left;
}
header:hover {
	background-color: rgb(255,255,255);
	transition: all 0.2s linear;
}
header:hover #menu li:hover {
	border-top: 4px solid orange;
}
header:hover #menu li a {
color: #333;
}
#menu ul {
	list-style: none;
	display: block;
}
#menu ul li {
	display: inline-block;
}
#menu ul li:active {
	border-top: 4px solid orange;
}
#menu li a {
	text-decoration: none;
	color: rgba(255,255,255,0.9);
	font: 0.8em Arial;
	padding: 27px 15px;
	cursor: pointer;
	display: block;
}