JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="topnav">
    <li><div class="menu_li"><div class="menu_a"><a href="" target="_blank">Сведения об образовательной организации</a></div><div class="button_menu1 button_menu"><img src="/images/_.png"/></div> </div>
         <ul>
             <li><a >Основные сведения</a>
                 <ul>
                     <li><a href="">Годовой календарный график</a></li>
                     <li><a href="">Расписание звонков</a></li>
                 </ul>
             </li>
             <li><a href="">Структура и органы управления образовательной организацией</a></li>
             <li><a href="">Документы</a>
                 <ul>
                     <li><a href="">Устав образовательной организации</a></li>
                     <li><a href="">Лицензия на осуществление образовательной деятельности</a></li>
                     <li><a href="">Свидетельство о государственной аккредитации</a></li>
                     <li><a href="">План финансово-хозяйственной деятельности</a></li>
                     <li><a href="">Локальные нормативные акты</a></li>
                     <li><a href="">Документ об оказании платных образовательных услуг</a></li> 
                     <li><a href="">Предписания органов, осуществляющих государственный контроль</a></li>
                     <li><a href="">Отчет о результатах самообследования</a></li> 
                 </ul>
             </li>
             <li><a href="">Образование</a></li>
             <li><a href="">Образовательные стандарты</a></li>
             <li><a href="">Руководство. Педагогический (научно-педагогический) состав</a>
                 <ul>
                     <li><a href="">Администрация</a></li>
                     <li><a href="">МО учителей начальной школы</a></li>
                     <li><a href="">МО математиков и информатиков</a></li>
                     <li><a href="">МО филологов и историков</a></li>
                     <li><a href="">МО творчество и спорт</a></li>
                     <li><a...

CSS

.topnav {
 font-family: "CenturyGothicRegular","Century Gothic",Arial,Helvetica,sans-serif;
 padding: 40px 28px 25px 0;
 width: 205px;
 background: #333333;
}
ul.topnav {
 font-size: 1em;
 line-height: 0.5em;
 list-style: none outside none;
 margin: 0;
 padding: 0;
 overflow:hidden;
}
ul.topnav li {
}
ul.topnav li a {
 color: #000;
 display: block;
 font-size: 11px;
 font-weight: bolder;
 line-height: 10px;
 padding: 10px 5px;
 text-decoration: none;
 border-bottom: 1px solid #D3D3D3;
 width:100%;
}
ul.topnav li a:hover {
 background-color: #7D7D7D;
 color: white;
}
ul.topnav ul {
 display: none;
 margin: 0;
 padding: 0;
}
ul.topnav ul li {
 clear: both;
 margin: 0;
 padding: 0;
}
ul.topnav ul li a {
 font-size: 10px;
 font-weight: normal;
 outline: 0 none;
 padding-left: 20px;
}
ul.topnav ul li a:hover {
 background-color: #DCDCDC;
 color: #555;
}
ul.topnav ul ul li a {
 color: silver;
 padding-left: 40px;
}
ul.topnav ul ul li a:hover {
 background-color: #D7D7D7;
 color: #555555;
}
ul.topnav, ul.topnav ul {
 list-style-type:none;
 margin: 0px;
 padding: 0px;
 width: 200px;
}

ul.topnav a,ul.topnav span { display: block; text-decoration: none; }

ul.topnav li { margin-top: 1px; }

ul.topnav li a {
 background: #333333;
 color: #FFFFFF;
 padding: 8px 5px;
}

ul.topnav li a:hover,ul.topnav li span:hover { background: #000000; }

ul.topnav li ul li a {
 background: #CCCCCC;
 color: #000000;
 padding-left: 20px;
}

ul.topnav li ul li a:hover {
 background: #AAAAAA;
 border-left: 5px #000000 solid;
 padding-left: 15px;
}

.button_menu{position:relative;width:20px;float:right;top:2px;}
.button_menu1{position:relative;width:20px;float:right;top:10px;}
.menu_li{width:100%;}
.menu_a{width:165px;float:left;}

JavaScript

$(function() {
    $(".topnav ul").each(function(indx, el) {
        $(this).prev().click(function() {
            $(el).slideToggle();
            return false
        })
    }).hide()
});