Cacher is the code snippet organizer for pro developers

<li class="header__menu-item">
<a class="header__menu-link" href="#">Пункт меню</a>
    <ul class="header__menu-sub">
      <li class="header__menu-sub-item">Подпункт меню</li>
      <li class="header__menu-sub-item">Подпункт меню</li>
      <li class="header__menu-sub-item">Подпункт меню</li>
      <li class="header__menu-sub-item">Подпункт меню</li>
      <li class="header__menu-sub-item">Подпункт меню</li>
      <li class="header__menu-sub-item">Подпункт меню</li>
    </ul>
</li>

$(document).ready(function() {

    $('.header__menu-link').click(function() {
        if ($(window).width() <= 767) {
            console.log($(window).width());
            if ($(this).parent(".header__menu-item").hasClass("menu-open")) {
                console.log('close');
                $(this).parent(".header__menu-item").addClass('menu-close');
                $(this).parent(".header__menu-item").removeClass('menu-open');
            } else {
                console.log('open');
                $(this).parent(".header__menu-item").addClass('menu-open');
                $(this).parent(".header__menu-item").removeClass('menu-close');
            }
        }
    });

});

.header__menu-item {
    position: relative
}

.header__menu-item:hover .header__menu-sub,
.header__menu-item:focus .header__menu-sub {
    opacity: 1;
    pointer-events: all
}

.header__menu-sub {
    position: absolute;
    top: 54px;
    left: 0;
    display: block;
    margin: 0;
    padding: 10px 0;
    min-width: 300px;
    list-style: none;
    background-color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: .2s opacity, .2s -webkit-transform;
    transition: .2s opacity, .2s transform;
    transition: .2s opacity, .2s transform, .2s -webkit-transform
}

.header__menu-sub-link {
    display: block;
    padding: 7px 10px;
    width: 100%;
    color: inherit;
    text-decoration: none !important;
    transition: .2s color, .2s background-color
}

@media only screen and (max-width: 767px) {
    .header__menu {
        overflow: hidden;
    }

    .header__menu-item:nth-child(2)>.header__menu-link:after {
        content: '';
        width: 10px;
        height: 10px;
        display: inline-block;
        left: 10px;
        position: relative;
        transition: .3s;
        background-image: url(../../img/arrow-down.svg);
        background-position: center;
        background-size: cover;
    }

    .header__menu-item:nth-child(2).menu-open>.header__menu-link:after {
        transform: rotate(180deg);
    }

    .header__menu-item.menu-open>.header__menu-sub {
        height: 100%;
    }

    .header__menu-item.menu-close>.header__menu-sub {
        height: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header__menu-sub {
        width: 350px;
        padding-left: 0;
        /* transition: .5s; */
    }

    .header__menu-sub-item {
        text-align: left;
        list-style-type: none;
    }

    .header__menu-item:hover .header__menu-sub {
        /* display: block; */
        height: 100%;
    }

    .header__menu-item {
        width: 120px;
    }

    .header__menu-item:nth-child(3) {
        width: 130px;
    }
}

@media only screen and (max-width: 991px) {
    .header__menu-sub {
        background: #fff;
        width: 100%;
        margin: 0 auto;
        display: block;
        height: 0;
        overflow: hidden;
        padding: 0;
        list-style-type: none;
        text-align: center;
    }

    .header__menu-sub-item {
        padding: 6px;
    }

    .header__menu-sub-item a {
        color: inherit;
    }

    .header__menu-sub-item:hover a {
        text-decoration: none;
        color: #fff;
        display: block;
    }

    .header__menu-sub-item:hover {
        background-color: #003b6e;
        color: white;
    }
}