JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div class="side">
<ul class="menu">
<li class="menulist"><a href="#">Пункт 1</a>
<ul class="menudrop">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
</ul>
</li>
<li class="menulist"><a href="#">Пункт 2</a>
<ul class="menudrop">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
</ul>
</li>
</ul>
</div>
</body>

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{  
  position:relative;
}

.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;
}

.menulist{
/*position: relative;*/
display:block;
}

.menudrop {
position: absolute;
width: 100%;
left: 100%;
top: -9999em;
opacity: 0;	
transition: 0.5s opacity;
border-left:10px solid transparent;
}

.menulist:hover .menudrop {
opacity: 1;
top: 0;
}