Cacher is the code snippet organizer for pro developers

<ul class="catalog-menu">
  <li class="catalog-menu-item catalog-menu-item-with-submenu active">
    <a href="services.html" class="catalog-menu-link">Вождение в нетрезвом виде</a>
    <button class="catalog-menu-btn js-btn-show" type="button"></button>
    <ul class="catalog-submenu hidden-content js-hidden-content">
      <li class="catalog-submenu-item catalog-submenu-item-with-submenu">
        <a href="" class="catalog-submenu-link">Подкатегория</a>
      </li>
      <li class="catalog-submenu-item catalog-submenu-item-with-submenu">
        <a href="" class="catalog-submenu-link">Следующая подкатегория</a>
      </li>
    </ul>
  </li>
</ul>

.catalog-menu {
    &-item {
        border-bottom: 1px solid @accent-color-medium;
        &:last-child {
            border-bottom: none;
        }
        &.active, &:hover {
            .catalog-menu-link {
                font-weight: bold;
                background-color: #0c4078;
            }
        }
        &-with-submenu {
            position: relative;
            .catalog-menu-btn {
                position: absolute;
                right: 0;
                top: 26px;
                width: 46px;
                height: 32px;
                &::before {
                    content: '';
                    left: 0;
                    top: 5px;
                    position: absolute;
                    width: 32px;
                    height: 22px;
                    background-repeat: no-repeat;
                    background-image: url("../img/sprite.png");
                    background-position: -60px -40px;
                    .transition();
                }
                &.active {
                    &::before {
                        .rotate(90deg);
                    }
                }
            }
        }
        &:first-child {
            .catalog-menu-link {
                &::before {
                    background-position: 0 -135px;
                }
            }
        }
        &:nth-child(2) {
            .catalog-menu-link {
                &::before {
                    background-position: -50px -134px;
                }
            }
        }
        &:nth-child(3) {
            .catalog-menu-link {
                &::before {
                    background-position: -102px -134px;
                }
            }
        }
        &:last-child {
            .catalog-menu-link {
                &::before {
                    background-position: -155px -134px;
                }
            }
        }
    }
    &-link {
        position: relative;
        display: block;
        padding: 15px 65px 15px 90px;
        font-size: 18px;
        color: #ffffff;
        background-color: @accent-color;
        &:hover, &:active, &:focus, &.active {
            font-weight: bold;
            background-color: #0c4078;
            
        }
        &::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 50%;
            margin-top: -23.5px;
            width: 48px;
            height: 48px;
            background-repeat: no-repeat;
            background-image: url("../img/sprite.png");
        }
    }
}
.catalog-submenu {
    &-item {
        border-bottom: 1px solid @accent-color;
        &:last-child {
            border-bottom: none;
        }
        &:hover, &.active {
            .catalog-submenu-link {
                font-weight: bold;
                background-color: #0c4078;
            }
        }
    }
    &-link {
        display: block;
        padding: 15px 15px 15px 90px;
        background-color: @accent-color-medium;
        color: #ffffff;
        &:hover, &:active, &:focus, &.active {
            font-weight: bold;
            background-color: #0c4078;
        }
    }
}
.hidden-content {
    display: none;
}

$('.js-btn-show').click(function () {
    $(this).toggleClass('active');
    $(this).siblings('.js-hidden-content').slideToggle();
});