JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div id="menu-glm">
    <ul id='nav_list_moy' class='nav_list'>
        <li class='glLi'>
<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='glLi'>
<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;
    border: 1px solid #24a6d7;
}
.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:none; */
    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:7px;
    left:2px;
    border: 0px;
    padding:0px;
    margin:0px;
}
.nav_list li div img {
    padding:0px;
    margin:0px;
    cursor: pointer;
    border: 1px solid #fff;
    height: 10px;
    width: 10px;
}

JavaScript

$(document).ready(function () {


    $('ul', '#nav_list_moy').each(function() {
        $(this)
            .closest('li')
            .children('.plus')
            .append('<img src="http://s.4pda.ru/forum/style_images/1/newpost.gif" alt="">');
    });

    $('div.plus').click(function () {

        if ($(this).next().is(':hidden')) // проверяем скрыт или нет
        {
            $(this).next().slideDown(200);
        } else {
            $(this).next().slideUp(200);
        }
    });
}); // полный зе енд