JSFiddle - React, Tailwind, and code Playground
HTML
<div id="menu-glm">
<ul id='nav_list_moy' class='nav_list'>
<li >
<a href='/about/' title='О компании'>О компании</a>
<div class='plus'></div>
<ul>
<li><a href='/about/management/' title='Менеджмент'>Менеджмент</a></li>
<li><a href='/about/history/' title='История'>История</a></li>
<li><a href='/about/vacancies/' title='Вакансии'>Вакансии</a></li>
<li><a href='/about/awards/' title='Награды и сертификаты'>Награды и сертификаты</a></li>
<li><a href='/about/partners/' title='Партнёры'>Партнёры</a></li>
</ul>
</li>
<li >
<a href='/corporate/' title='Услуги'>Услуги</a>
<div class='plus'></div>
</li>
<li class='activ'>
<a href='/clients/clients/' title='Клиенты'>Клиенты</a>
<div class='plus'></div>
<ul>
<li><a href='/clients/clients/' title='Клиенты'>Клиенты</a></li>
<li><a href='/clients/portfolio/' title='Портфолио'>Портфолио</a></li>
<li><a href='/clients/review/' title='Отзывы о работе'>Отзывы о работе</a></li>
</ul>
</li>
<li >
<a href='/coordinates/main-office/' title='Контакты'>Контакты</a>
<div class='plus'></div>
<ul>
<li><a href='/coordinates/main-office/' title='Основной офис'>Основной офис</a></li>
<li><a href='/coordinates/region-office/' title='Подразделения'>Подразделения</a></li>
<li><a href='/coordinates/feedback/' title='Обратная связь'>Обратная связь</a></li>
</ul>
</li>
</ul>
</div>
CSS
html, body {margin:0px; padding:0px; background-color:#385762; font-size:13px;
line-height:18px; font-family:Arial; height:100%; color:#fff;}
#menu-glm {
width: 240px;
position: relative;
}
.nav_list {
padding: 0px;
margin: 0px;
width:240px;
list-style:none;
}
.nav_list li {
position:relative;
}
.nav_list li a {
padding:5px 0px 5px 20px;
display:block;
font-size:15px;
font-weight:bold;
color:#fff;
text-decoration:none;
}
.nav_list li a:hover {
color: #fff;
background-color: #24a6d7;
}
.nav_list ul {
margin:0;
display:block;
padding:0px;
margin:0px;
}
.nav_list ul li {
list-style:none;
position:static;
}
.nav_list ul a {
padding-left: 0px;
font-size:14px;
color:#a3e5fc;
padding:3px 0px 3px 30px;
font-weight:normal;
}
.nav_list li div {
position:absolute;
top:5px;
left:2px;
border: 0px;
padding:0px;
margin:0px;
}
.nav_list li div img {
padding:0px;
margin:0px;
cursor: pointer;
}
JavaScript
$(document).ready(function() {
$('#nav_list_moy').find('ul').prev('.plus').html('<img src="http://milknews.ru/img/plus.gif">');
$('.activ > div').html('<img src="http://milknews.ru/img/minus.gif">');
//делаем пункты видимыми и скрываем js для тех у кого отключен js они должны быть видимыми, если вам хочется более мягкий способ, то сделайте вариант с формированием style через js в head
$('li > ul').css({'display':'none'});
$('.activ > ul').slideDown(250);
$('div.plus').click(function() {
if($(this).parent().hasClass('activ')) {
$('#nav_list_moy .activ > .plus').html('<img src="http://milknews.ru/img/plus.gif">');
$('#nav_list_moy .activ > ul').slideUp(250);
$('#nav_list_moy .activ').removeClass('activ');
}
else {
$('#nav_list_moy .activ > .plus').html('<img src="http://milknews.ru/img/plus.gif">');
$('#nav_list_moy .activ > ul').slideUp(250);
$('#nav_list_moy .activ').removeClass('activ');
$(this).parent().addClass('activ');
$('#nav_list_moy .activ > ul').slideDown(250);
$('#nav_list_moy .activ > .plus').html('<img src="http://milknews.ru/img/minus.gif">');
}
});
}); // 0 - конец ready