JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dl-menu">
	<li><a href="#">Наша продукция</a>
		<ul class="dl-submenu">
			<li><a href="#">Запчасти</a></li>
        </ul>
	</li>
</ul>

CSS

.dl-menu > li > .dl-submenu {
    position: absolute;
    top: 100%;
    background: #333333;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease, visibility 0.4s linear 0s; 
    -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease, visibility 0.4s linear 0s;
    -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease, visibility 0.4s linear 0s;
    -o-transition: opacity 0.4s ease, -o-transform 0.4s ease, visibility 0.4s linear 0s;
    transition: opacity .4s ease, transform .4s ease, visibility .4s linear 0s;
}

.dl-menu li:hover  .dl-submenu {
    top: 13.8%;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0); 
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
    transform: translate(0);
    -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
    -moz-transition: opacity 0.4s ease, -moz-transform 0.4s ease;
    -ms-transition: opacity 0.4s ease, -ms-transform 0.4s ease;
    -o-transition: opacity 0.4s ease, -o-transform 0.4s ease;
    transition: opacity .4s ease, transform .4s ease; 
}