JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id="nav">
	<li>
		<a href="#">Ссылка</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="#">Ссылка</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="#">Ссылка</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="#">Ссылка</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="#">Ссылка</a>
		<ul>
			<li><a href="#">Ссылка</a></li>
			<li><a href="#">Ссылка</a></li>
			<li><a href="#">Ссылка</a></li>
			<li><a href="#">Ссылка</a></li>
		</ul>
	</li>
</div>

CSS

body {
  background: url(f.jpg) no-repeat center center fixed;
  background-size: cover;
  text-align: center;
}
 
#nav {
  font-family: 'Open Sans', arial;
  text-align: center;
  position: relative;
  display: inline-block;
}
#nav li {
  display: inline-block;
  margin: 0 -5px;
  position: relative;
  list-style: none;
  background: #ff3131;
  width: 190px;
}
#nav li:hover > a {
  background: #b32424;
}
#nav li:hover > ul {
  visibility: visible;
  position: absolute;
	top: 100%;
  z-index: 99;
}
#nav li:first-child:hover > ul {
  left: 0;
}
#nav li:first-child ul {
  border-left: none;
}
#nav li:first-child ul li {
  border-left: none;
}
#nav li:last-child ul {
  border-left: none;
}
#nav li:last-child ul li {
  border-left: none;
}
#nav a {
  text-decoration: none;
  display: block;
  padding: 35px 65px;
  color: #ffffff;
}
#nav ul {
  visibility: hidden;
  padding: 0;
  position: absolute;
}
#nav ul a {
  padding: 18px 65px;
}
#nav ul li:hover {
  background: #d92a2a;
}
#nav > li {
  border-right: 2px solid #d92a2a;
}
#nav > li:last-child {
  border-right: none;
}
#nav > li ul li {
  border-left: 2px solid #d92a2a;
  border-right: 2px solid #d92a2a;
}
 
#active a {
  background: #b32424;
}