JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

<ul class="nav">
    <li><a href="#">Главная категория</a></li>
    <ul  id="c1">
        <li><a href="#">Подкатегория 1</a></li>
     
        <ul id="c2">
            <li><a href="#">Подкатегория 1.1</a></li>
            <ul  id="c3">
                <li><a href="#">Подкатегория 1.1.1</a></li>
                <li><a href="#">Подкатегория 1.1.2</a></li>
            </ul>
            <li><a href="#">Подкатегория 1.2</a></li>
        </ul>
         
        <li><a href="#">Подкатегория 2</a></li>
         
        <ul  id="c7">
            <li><a href="#">Подкатегория 2.1</a></li>
            <li><a href="#">Подкатегория 2.2</a></li>
        </ul>
 
    </ul>
</ul>

CSS

body{
  background: #DCDCDC;
}
/*блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border: 1px solid #FFFFFF;
  list-style: none;
  width: 150px;         /*ширина блока меню*/
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav ul li {
  display: none;    /*скрываем вложенные пункты*/
}
ul.nav:hover ul li {
  display: block;   
}
 
/*Выпадающее меню*/
  
ul.nav li:hover {
  /* позиционирование вложенных элементов
   * будет расчитыватьться относительно
   * родительского элемента
   */
  position: relative;
  background: yellow;
}
ul.nav li:hover > ul {
  display: block;
}
ul.nav li:hover ul{
  position: absolute;
  top: 0;       /*Задаём координаты для вложенных пунктов*/
  left: 150px; /*меню раскрывается вправо*/
}