JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">             
   <ul>             
      <li><a href="#">раздел №1</a>             
            <ul>             
               <li><a href="#">уровень №21</a></li>             
               <li><a href="#">уровень №22</a></li>             
               <li><a href="#">уровень №23</a>             
                  <ul>             
                     <li><a href="#">уровень №31</a></li>             
                     <li><a href="#">уровень №32</a></li>             
                     <li><a href="#">уровень №33</a>             
                        <ul>             
                           <li><a href="#">уровень №41</a></li>             
                           <li><a href="#">уровень №42</a></li>             
                           <li><a href="#">уровень №43</a></li>             
                           <li><a href="#">уровень №44</a></li>             
                        </ul>             
                     </li>             
                     <li><a href="#">уровень №34</a></li>             
                  </ul>             
               </li>             
               <li><a href="#">уровень №24</a></li>             
            </ul>             
         </li>             
      <li><a href="#">раздел №2</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="#">раздел №3</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>       ...

CSS

body {             
   margin : 0;             
   padding : 10px;             
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;             
   behavior: url(csshover.htc);             
   background-color: #ffffff;             
}             
             
/* Горизонтальное меню */             
             
#menu {             
   width: 100%; /* задаем ширину для div */             
   float: left;  /* добавляем список в div */             
   border-top: 1px  solid  #000000;  /* рисуем линию поверх div */             
   border-bottom: 1px solid #000000; /* рисуем линию снизу div */             
   font-size: 11px;  /* задаем размер шрифта */             
   background: #2a52be;  /* фоновый цвет div */             
   padding: 0 0 0 30px;  /* отступ ul от края контейнера */  
 
}             
#menu ul {             
   margin: 0px;             
   padding: 0px;             
}             
* html #menu ul {             
   float: left;  /* заставляет ul вместить все li */             
   border-left: 1px solid #000000;  /* добавляет левую вертикальную черту к ul */             
   margin-left: 15px;  /* IE удваивает заданное значение */             
}             
#menu li {             
   float: left;   /* располагаем список по горизонтали */             
   position: relative;  /* контекст позиционирования для раскрывающегося меню с абсолютным позиционированием */                
   list-style-type: none;  /* удаляем маркеры */             
   background: #2a52be;  /* задаем фоновый цвет элементов меню */             
   border-right: 1px solid #000000;  /* создаем разделительные линии между элементами li */ 
}             
#menu li:first-child {             
   border-left: 1px solid #000000;  /* первая вертикальная линия в меню */             
}             
#menu a {             
   display: block;  /* пункты вложенного меню выделяются при наведении указателя */             
   text-decoration: none;  /* удаляем подчеркивание...