JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
	<ul>
		<li>
			<span>Раз</span>

			<ul class="dropdown-menu">
				<li>Четыре</li>
				<li>Пять</li>
				<li>Шесть</li>
			</ul>
		</li>
		<li><span>Два</span></li>
		<li>
            <span>Три</span>
            <ul class="dropdown-menu">
				<li>Семь</li>
				<li>Восемь</li>
				<li>Девять</li>
			</ul>
        </li>
	</ul>
</nav>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav > ul {
    background: red;
    height: 60px;
    line-height: 60px;
    position: relative;
    z-index: 90;
}

nav > ul > li {
    display: inline-block;
}

nav > ul > li > span {
    cursor: pointer;
    display: block;
}

nav > ul > li:hover .dropdown-menu {
    top: 100%;
} 

.dropdown-menu {
    background: green;
    left: 0;
    position: absolute;
    top: -300px;
    z-index: 10;
    
    transition: top 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.13s, left 0s linear 0s;
}