JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<div class="header-container">
		<h1>Bis<span>Lite</span></h1>
		<ul class="header-nav">
			<li>
				<a href="index.html">Home</a>
			</li>
			<li>
				<a href="#">About Us</a>
			</li>
			<li>
				<a href="#" class="nav-arrow">Services</a>
				<ul>
					<li><a href="#">Web Design</a></li>
					<li><a href="#">Wordpress Design</a></li>
					<li><a href="#">Mobile App Devplopment</a></li>
					<li><a href="#">Internet Marketing</a></li>
					<li><a href="#">Social Media Management</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="nav-arrow">Portfolio</a>
				<ul>
					<li><a href="#">Услуга один</a></li>
					<li><a href="#">Услуга два</a></li>
					<li><a href="#">Услуга три</a></li>
					<li><a href="#">Услуга четыре</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Blog</a>
			</li>
			<li>
				<a href="#">Contact Us</a>
			</li>
		</ul>
	</div>
</header>

CSS

*{
	margin: 0;
	padding: 0;
}
header{
	height: 120px;
	width: 100%;
	background: #e8ebf1;
}
.header-container{
	height: 120px;
	width: 1000px;
	border: solid 1px #000;
	margin: 0 auto;
}
.header-container h1{
	font: bold 50px Lato;
	color: #000;
	float: left;
	margin-top: 25px;
}
.header-container h1 span{
	font: 50px Lato;
	color: #2aacc8;
}




/*------------------------------------*\
	НАВИГАЦИЯ
\*------------------------------------*/




.header-nav{
	float: right;
	line-height: 115px;
}
.header-nav li{
	float: left;
	list-style: none;
}
.header-nav li a{
	font: bold 13px Arial;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	padding: 5px 15px 5px 10px;
	margin-left: 15px;
   display: inline-block;
}
.header-nav li a:hover{
	border-top: solid 5px #2aacc8;
	background: #fff;
	color: #2aacc8;
	
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/

.header-nav ul{
	list-style: none;
	position: absolute;
	left: -9999px; 
	opacity: 0;
	-webkit-transition: 0.25s linear opacity;
}
.header-nav ul li{
	padding-top: 1px;
	float: none;
	background: #fff;
}
.header-nav ul a{
	white-space:nowrap; 
	display:block;
	border-bottom: solid 1px #ccc;
}
.header-nav li:hover ul{ 
	left: 734px; 
	top: 73px;
	opacity:1; 
}
.header-nav li:hover ul a{
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
.header-nav li:hover ul li a:hover{
	background:#fff;
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}






.header-nav .nav-arrow{
	position: relative;
}
.header-nav .nav-arrow:after {
   content: '';
   position: absolute;
   right: 2px;
   width: 7px;
   height: 5px;
	margin-top: 5px;
	background: url("../images/nav-arrow.png") no-repeat right;
}