JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li><a href="">пункт меню</a>
		<ul>
			<li><a href="">Пункт подменю первый</a></li>
			<li><a href="">Пункт подменю второй</a></li>
			<li><a href="">Пункт подменю третий</a></li>
		</ul>
	</li>
	<li><a href="">пункт меню</a></li>
	<li><a href="">пункт меню</a>
		<ul>
			<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>
		</ul>
	</li>
	<li><a href="">пункт меню</a></li>
	<li><a href="">пункт меню</a>
		<ul>
			<li><a href="">Пункт подменю первый</a></li>
			<li><a href="">Пункт подменю второй</a></li>
			<li><a href="">Пункт подменю третий</a></li>
		</ul>
	</li>
</ul>

CSS

body,html{margin:0;padding:0;}
*{
transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
}
ul{
list-style:none;
padding:0;
margin:20px 0 0 20px;
width:auto;
height:auto;
}
ul>li{
float:left;
position:relative;
}
ul>li>a,ul>li>ul>li>a{
display:block;
text-align:center;
height:auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background:#428db0;
color:#fff;
font-family:Arial;
font-size:12px;
text-transform:uppercase;
text-decoration:none;
padding:10px 13px;
}
ul>li>a{
width:150px;
}
ul>li>a:hover,ul>li>ul>li>a:hover{
background:#296784;
}
ul>li>ul{
position:absolute;
width:auto;
height:auto;
list-style:none;
margin:0;
padding:0;
display:none;
left:50%;
margin-left:-125px;
}
ul>li:first-child>ul{
left:0;
margin-left:0;
}
ul>li:last-child>ul{
left:auto;
right:0;
margin:0;
}
ul>li:hover>ul{
display:block;
}
ul>li>ul>li>a{
width:250px;
}
ul>li>ul>li>a:last-child{
border:none;
}
ul>li>ul>li{
border-bottom:1px solid #fff;
}
ul>li>ul>li:first-child{
border-top:1px solid #fff;
}