JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

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

CSS

body{
  background: #DCDCDC;
}
/*блок меню*/
ul{
  margin: 0;
  padding: 0;
   width: 150px; 
}
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;
}
.nav ul li {
  display: none;    /*скрываем вложенные пункты*/
}
ul.nav:hover .c1 {
  display: block;   
}
.c1:hover .c2,
.c1:hover .c2_2{
  display: block; 
}  


.c2:hover .c3{
  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; /*меню раскрывается вправо*/
}