JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<ul class="dl-menu">
	<li class="dl-menu-point">
		<a href="#">Наша продукция</a>
		<ul class="dl-submenu">
			<li class="dl-submenu-point">
				<a href="#">Спецтехника</a>
				<ul class="dl-submenu sub-one">
					<li><a href="#">Подкатегория 1</a></li>
					<li><a href="#">Подкатегория 2</a></li>
				</ul>
			</li>
			<li class="dl-submenu-point">
				<a href="#">Запчасти для спецтехники</a>
				<ul class="dl-submenu sub-two">
					<li><a href="#">Подкатегория 1</a></li>
					<li><a href="#">Подкатегория 2</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

CSS

body {
    margin: 0;
}
.dl-menu,
.dl-submenu{
    list-style: none;
    margin:0;
    padding: 0;
}
.dl-menu{
    height: 40px;
    line-height: 40px;
}
.dl-menu li {
    padding: 0 20px;
}
.dl-submenu-point {
    float: left;
}
.dl-submenu .dl-submenu {
    margin-left: -20px;
}
.dl-submenu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 0;
    background: #333;
    transform: translate(0, -300%);
    transition: .4s;
}
.dl-menu li:hover > .dl-submenu {
    visibility: visible;
    opacity: 1;
    bottom: calc(100% - 40px);
    transform: translate(0, 100%);
}
.dl-submenu a {
    color: #fff;
}