JSFiddle - React, Tailwind, and code Playground

by technik300

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
 	<main class="main">
		<section class="navigation">
			<nav class="navigation__menu menu">
				<ul class="menu__list">
					<li class="menu__item">
						<div class="menu__link">Про нас</div>
						<ul class="menu__sub-list">
							<li class="menu__sub-item">
								<div class="menu__sub-link">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
							</li>
						</ul>
					</li>
					<li class="menu__item menu__item--center">
						Преймущества
						<ul class="menu__sub-list">
							<li class="menu__sub-item">
								<div class="menu__sub-link">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
							</li>
						</ul>
					</li>
					<li class="menu__item">
						Наши работы
						<ul class="menu__sub-list">
							<li class="menu__sub-item">
								<div class="menu__sub-link">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
							</li>
						</ul>
					</li>
				</ul>
			</nav>
		</section>
	</main> 
</body>
</html>

SCSS

*{
	padding: 0;
	margin: 0;
}

a{
	text-decoration: none;
	color: inherit;
}

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

body{
  font-family: "Calibri";
}

.navigation {
	height: 62px;
	background: #af62fe;
	display: flex;
	align-items: center;
	&__menu {}
}
.menu{
	width: 100%;
 	display: flex;
	align-items: stretch;
  	justify-content: center;
  	height: 62px;
	  &__list{
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-wrap: wrap;
	    width: 100%;
	    gap: 40px 50px;
	  }
	  
	  &__item{
	  	cursor: pointer;
	  	white-space: nowrap;
	    font-size: 36px;
	    transition: background .3s ease-out;
	    
	   	height: 62px;
	    flex: 0 0 30%;
	    text-align: center;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		position: relative;

		@media(any-hover:hover){
		    &:hover{
				background: #9051D0;
		    }
		}

		&:hover{
			.menu__sub-list{
				opacity: 1;
				visibility: visible;
				transform: translateY(0px);
				pointer-events: auto;
			}
      .menu__sub-list:before{
        content:"";
        
      }
			.menu__icon{
				transform: rotate(180deg);
			}
		}
	  }

	&__sub-list {
		position: absolute;
    z-index: 50;
		top: 130%;
		background: #C662FF;
		width: 350px;
		height: 70px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		white-space: normal;
		flex-wrap: wrap;

		padding: 39px 31px 358px 31px;

		opacity: 0;
		visibility: hidden;
		transform: translateY(-100px);

		transition: all .4s ease;
		pointer-events: none;
	}
	&__sub-item {
	}
	&__sub-link {
		text-transform: uppercase;
	}

}

@media(max-width: 767.98px){
	.menu{
		&__item{
			font-size: 26px;
		}
	}
}