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;
    transform: translateY(50px);
    transition: opacity .4s ease, transform .4s ease, visibility .4s linear 0s;
}

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