JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<nav class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Выпадающее</a>
    
      <ul>
        <li><a href="#">Выпадающее меню 1 пункт</a></li>
        <li><a href="#">Выпадающее меню 2 пункт</a></li>
        <li><a href="#">Выпадающее меню 3 пункт</a></li>
        <li><a href="#">Выпадающее меню 4 пункт</a></li>
      </ul>
    
    </li>
    <li><a href="#">Новости</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS

.menu ul li{
  padding: 10px;
  border:1px solid white;
}
.menu ul > li:hover{
  background-color: white;
  border:1px solid #cbcbcb;
}
.menu ul ul > li:hover{
  background-color: white;
}
.menu ul li, .menu ul{
  display: inline-block;
}
.menu ul{
  position: relative;
  margin: 0;
  padding: 0;
  background-color: white;
}
.menu ul ul{
  display: none;
  position: absolute;
  background-color: white;
  margin-top: 10px;
  margin-left: -11px;
  border:1px solid #cbcbcb;
}
.menu ul a{
  color: black;
  text-decoration: none;
}
.menu ul ul a{
  color: black;
  text-decoration: none;
}
.menu li:hover ul{
  display: block;
}
 
.menu li:hover li{
  display: block;
}