JSFiddle - React, Tailwind, and code Playground

HTML

<div id='cssmenu'>
    <ul>
       <li class='has-sub'><a href='#'><span>Главная</span></a>
          <ul>
             <li class='active'><a href='#'><span>Сведения об образовательной организации. Контакты</span></a></li>
             <li class='active'><a href='#'><span>Фотогалерея</span></a><li>
             <li class='active'><a href='#'><span>Попечительский совет</span></a><li> 
         <li class='active'><a href='#'><span>История колледжа</span></a><li>
             <li class='active'><a href='#'><span>О наших выпускниках</span></a><li>    
          </ul>
       </li>
 <li class='has-sub'><a href='#'><span>Студенту. Очное и заочное отделение</span></a>       
          <ul>
             <li class='active'><a href='#'><span>Сведения об образовательной организации. Контакты</span></a></li>
             <li class='active'><a href='#'><span>Очное отделение</span></a><li>
             <li class='active'><a href='#'><span>Заочное отделение</span></a><li> 
         <li class='active'><a href='#'><span>Учебная и производственная практика</span></a><li>
             <li class='has-sub'><a href='#'><span>Студенческое самоуправление</span></a>
        <ul>
            <li class='active'><a href='#'><span>1</span></a></li>
                <li class='active'><a href='#'><span>2</span></a><li>
        </ul>
        <li>    
        </ul>
</li>
    </ul>
</div>

CSS

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {
    border: 0 none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    line-height: 1;
    list-style: none outside none;
    margin: auto;
    padding: 0;
    position: relative;
}
#cssmenu {
    color: #575752;
    font-family: Helvetica,Arial,sans-serif;
    width: 170px;
}
#cssmenu ul ul {
    display: none;
}
#cssmenu > ul > li > a {
    background: #E5E5D8 url(images/bl.gif) 0 100% no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36aae7', endColorstr='#1fa0e4',GradientType=0 ); /* IE6-9 */
    border-left: 1px solid #babaaf;
    border-right: 1px solid #babaaf;
    border-top: 1px solid #babaaf;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    color: #575752;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 20px;
    text-decoration: none;
    /*text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);*/
    z-index: 2;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
    background: #babaaf; /* Old browsers */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fa0e4', endColorstr='#1992d1',GradientType=0 ); /* IE6-9 */
    color: #F5F2F2;
}
#cssmenu > ul > li.open > a {
    border-bottom: 1px solid #babaaf;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
    border-bottom: 1px solid #babaaf;
}
.holder {
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
.holder:after, .holder:before {
    content: "";
    display: block;
    height: 6px;
    position: absolute;
    right: 20px;
    -webkit-transform:...

JavaScript

function storage(name,value){
// сюда нужно встроить поддержку хранения значений в куках
   if(typeof value != 'undefined')
       localStorage.setItem(name,value);
   else
       return localStorage.getItem(name);
}

function store(sel){
    var val=[];
    $(sel).each(function(idx){
       if($(this).is('.open')) 
           val.push (idx);
    });
    return val;
}
function load(sel,val){
    var lis=$(sel);
    for(var idx=0;idx<val.length;idx++){
        if(!val[idx]) continue;
       var element=lis.eq(val[idx]);
        element.addClass('open');
        element.children('ul').show();
    };

}
$(document).ready(function () {
    var sel='#cssmenu li.has-sub';
    load(sel,storage('opened').split('|'));
    $('#cssmenu li.has-sub > a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
        storage('opened',store(sel).join('|'));
    });
 
    $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
});