JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
		<li><a href="#">Пункт 3</a></li>
		<li class="hide-menu">
			<a href="#">Пункт 4</a>
			<ul>
				<li>Подпункт 1 </li>
				<li>Подпункт 1 </li>
				<li>Подпункт 1 </li>
				<li>Подпункт 1 </li>
			</ul>
		</li>
	</ul>

CSS

* { margin: 0; padding: 0; }
	ul { list-style: none;}

	li { 
		position:relative; 
		float: left;
		padding: 0 10px;
	}
	.hide-menu > ul {
		position: absolute;
		left: 0;
		top: 20px;
		opacity: 0;
		

			-moz-transition: all 1.25s ease;
  -ms-transition: all 1.25s ease;
  -o-transition: all 1.25s ease;
  transition: all 2s ease;

	}
	.hide-menu > ul > li { 
		float: none; 
		display: block;
		width: 100px;
	}

.hide-menu > a:hover + ul {
	
	opacity: 1;
}