JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
  <ul>
  <li>Главная
  <ul class="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  </li>
    <li>Новости</li>
    <li>Форум</li>
    <li>О нас</li>
    <li>Контакты</li>
  </ul>
</header>

CSS

.header {
  height: 60px;
  background-color: #1B1B1B;
  color: white;
  padding-left: 30px;
}

.header > ul > li {
  /* ПОЗИЦИОНИРОВАНИЕ */
  position: relative;
  
  text-align: center;
  width: 80px;
  height: 60px;
  font-size: 1.2em;
  float: left;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header > ul > li:hover {
  background-color: #2D2D2D;
}
/* ВЫПАДАЮЩЕЕ МЕНЮ */
.menu {
  box-sizing: border-box;
  height: 0;
  width: 160px;
  border: 1px solid transparent;
  /* ПОЗИЦИОНИРОВАНИЕ */
  position: absolute;
  /* position: fixed; */
  left: 0px; top: 60px;
  overflow: hidden;
  
  transition: all .5s;
}

.menu li {
  display: block;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu li:hover {
  background-color: #3F3F3F;
}

.header li:nth-child(1):hover .menu {
  height: 180px;
  background-color: #2D2D2D;
  border: 1px solid black;
}