JSFiddle - React, Tailwind, and code Playground

by technik300

HTML

<!DOCTYPE html>
<html lang="ru">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <nav class="nav">
      <div class="nav__menu menu">
        <ul class="menu__list" style="max-width: 400px;">
          <li class="menu__item">
            <a href="" class="menu__link">Пункт#1</a>
            <ul class="menu__sub-list">
              <li class="menu__sub-item"><a href="" class="menu__sub-link">Под пункт#1</a></li>
            </ul>
          </li>
          <li class="menu__item">
            <a href="" class="menu__link">Пункт#2</a>
            <ul class="menu__sub-list">
              <li class="menu__sub-item"><a href="" class="menu__sub-link">Под пункт#2</a></li>
            </ul>
          </li>
          <li class="menu__item">
            <a href="" class="menu__link">Пункт#3</a>
            <ul class="menu__sub-list">
              <li class="menu__sub-item"><a href="" class="menu__sub-link">Под пункт#3</a></li>
            </ul>
          </li>
          <li class="menu__item">
            <a href="" class="menu__link">Пункт#4</a>
            <ul class="menu__sub-list">
              <li class="menu__sub-item"><a href="" class="menu__sub-link">Под пункт#4</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </body>

</html>

SCSS

*{
	padding: 0;
	margin: 0;
}

body, html { 
    width: 100%;
    height: 100%;
}

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

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

.menu{
  &__list{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
  }
  &__item{
    cursor: pointer;
    flex: 0 0 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;    
    position: relative;
    &:hover{
      .menu__sub-list{  
        margin-top: 0px;
        visibility: visible;
        opacity: 1;
      }
    }
  }
  &__link{
    font-weight: 700;
    font-size: 30px;
    width: 100%;
    text-align: center;
  }
  &__sub-list{
    position: relative;
    top: 0;
		visibility: hidden;
		opacity: 0;
    padding-top: 0px;
    margin-top: -100%;
		transition: all 0.3s linear;
  }
  &__sub-item{
    background: #000;
    width: 150px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
  }
  &__sub-link{
    color: #fff;
    font-weight: 700;
  }
}