JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown">
	<a class="" href="#">Ссылка 3</a>
	<div class="dropdown-menu">
		<a class="dropdown-item zz" href="#">Ссылка 1</a>
		<a class="dropdown-item zz" href="#">Ссылка 2</a>
		<a class="dropdown-item zz" href="#">Ссылка 3</a>
		<a class="dropdown-item zz" href="#">Ссылка 4</a>
	</div>
</div>

CSS

.dropdown 
{
	display: inline-block;
	
}
.dropdown-menu 
{
	position: absolute;
	margin-top: 30px;
	opacity: 0;
	width: 230px;
	transition: margin-top 0.25s, opacity 0.25s;
	border-right: 5px solid #81d742;
	background-color: #212121;text-align:right;
}
.dropdown-menu a {color:#fff;text-decoration:none;}/*Костыль для тестов */

.dropdown:hover .dropdown-menu 
{
	margin-top: 0;
	opacity: 1;
}

.dropdown-item 
{
	display:block;
	padding:10px;
	
}
.dropdown-item::after
{

    position:absolute;
    content: "";
	z-index:-1;
    width: 0;
    background-color: #81d742;
    transition: width 1s linear;
    right: 0;
    bottom: 0;
	top:0;
}
.dropdown-item:hover::after
{
	width: 100%;
}