JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
				<ul class="menu">
					<li><a href="#">ГЛАВНАЯ</a></li>
					<li><a href="#">ПРОДУКЦИЯ</a></li>
					<li><a href="#">ДОСТАВКА</a></li>
					<li><a href="#">КОНТАКТЫ</a></li>
				</ul>
			</nav>

CSS

nav ul.menu {
	height: 30px;
	width: 980px;
	margin: 0;
	padding: 0;
}
nav ul.menu li {
	width: 245px;
	line-height: 30px;
  text-align: center;
	display: inline-block;
	float: left;
	background: #53cfcb;
}
nav ul.menu li:hover {
	background: #0b7abf;
}
nav ul.menu li:hover:after {
	content: "1";
	height: 0px;
	width: 0px;
}
nav ul.menu li a {
	font-size: 14px;
	font-family: verdana, sans-serif;
	color: #000;
	display: block;
}
nav ul.menu li a:hover {
	color: #fff;
}