JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<title>2r</title>
</head>
<body>
	<div class="side">
		<ul class="menu">
			<li class="menu__list"><a href="#">Пункт 1</a></li>
				<ul class="menu__drop">
					<li><a href="#">Подпункт 1</a></li>
					<li><a href="#">Подпункт 2</a></li>
					<li><a href="#">Подпункт 3</a></li>
					<li><a href="#">Подпункт 4</a></li>
					<li><a href="#">Подпункт 5</a></li>
				</ul>
			<li><a href="#">Пункт 2</a></li>
			<li class="menu__list"><a href="#">Пункт 3</a></li>
				<ul class="menu__drop">
					<li><a href="#">Подпункт 1</a></li>
					<li><a href="#">Подпункт 2</a></li>
					<li><a href="#">Подпункт 3</a></li>
					<li><a href="#">Подпункт 4</a></li>
					<li><a href="#">Подпункт 5</a></li>
				</ul>
			<li><a href="#">Пункт 4</a></li>
			<li class="menu__list"><a href="#">Пункт 5</a></li>
				<ul class="menu__drop">
					<li><a href="#">Подпункт 1</a></li>
					<li><a href="#">Подпункт 2</a></li>
					<li><a href="#">Подпункт 3</a></li>
					<li><a href="#">Подпункт 4</a></li>
					<li><a href="#">Подпункт 5</a></li>
				</ul>
		</ul>
	</div>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	font: 1em/1.4em sans-serif;
}

a{text-decoration: none;}

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

	/*внешний вид меню*/
.side{
	width: 200px;
	margin: 20px;
}
.menu a{
	background: #3d3d3d;
	color: #fff;
	padding: 10px;
	display: block;
	border-bottom: 1px solid #666;
	transition: 0.5s all;
}

.menu a:hover{
	background: #666;
	padding: 10px 0 10px 20px;
}

/*Всплывающее меню*/

.menu_list{
	position: relative;
}
.menu__drop{
	position: absolute;
	width:100%;
  left:100%;
	top: 0;
	opacity: 0;
}

.menu__list:hover .menu__drop{
	opacity: 1;
}