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>
      	<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>

			<li><a href="#">Пункт 2</a></li>
			<li class="menu__list"><a href="#">Пункт 3</a>
      <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>
				
			<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;
  z-index: -1;
}

.menu__list:hover .menu__drop{
  z-index: 9999;
	opacity: 1;
}