<div class="stock-menu">
        <nav>
          <ul>
            <li class="stock-item">
              <a class="stock-item__link" href="#">Каталог</a>
              <div class="catalog-panel first">
                <div class="container">
                  <div class="header">
                    <div class="back">
                      <img src="img/left-arrow.svg" alt="">
                    </div>
                    <div class="catalog-close"></div>
                  </div>
                  <div class="title">
                    <span>Каталог</span>
                  </div>
                  <ul>
                    <li>
                      <div class="catalog-btn">
                        <span>Белорусская одежда</span>
                      </div>
                      <div class="catalog-panel">
                        <div class="container">
                          <div class="header">
                            <div class="back">
                              <img src="img/left-arrow.svg" alt="">
                            </div>
                            <div class="catalog-close"></div>
                          </div>
                          <div class="title">
                            <span>Каталог</span>
                          </div>
                          <div class="sub-title">
                            <span>Белорусская одежда</span>
                          </div>
                          <ul>
                            <li>
                              <div class="catalog-btn arrow">
                                <span>Блузки</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn arrow">
                                <span>Большие размеры</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Брюки</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn arrow">
                                <span>Верхняя одежда</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Гольфы</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Джемперы</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Жакеты</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Капри</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Кардиганы</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Комбинезоны</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Комплекты</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Костюмы</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Молодежные коллекции</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Нарядная одежда</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Пальто</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn arrow">
                                <span>Платья</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Сарафаны</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Спортивная одежда</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Топы</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Туники</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Шорты</span>
                              </div>
                            </li>
                            <li>
                              <div class="catalog-btn">
                                <span>Юбки</span>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <div class="footer-img">
                          <img src="img/mobile/v_menu2.png" alt="">
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="catalog-btn">
                        <span>Большие размеры</span>
                      </div>
                    </li>
                    <li>
                      <div class="catalog-btn">
                        <span>Молодежные коллекции</span>
                      </div>
                    </li>
                    <li>
                      <div class="catalog-btn">
                        <span>Нарядная одежда</span>
                      </div>
                    </li>
                    <li>
                      <div class="catalog-btn">
                        <span>Пляжная мода</span>
                      </div>
                    </li>
                    <li>
                      <div class="catalog-btn">
                        <span>Спорт</span>
                      </div>
                    </li>
                    <li>
                      <div class="catalog-btn">
                        <span>Белье</span>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="footer-img">
                  <img src="img/mobile/v_menu.png" alt="">
                </div>
              </div>
            </li>
            <li class="stock-item">
              <a class="stock-item__link" href="#">Новинки</a>
            </li>
            <li class="stock-item">
              <a class="stock-item__link" href="#">Акции</a>
            </li>
            <li class="stock-item">
              <a class="stock-item__link" href="#">Распродажа</a>
            </li>
          </ul>
        </nav>
      </div>
.stock-menu {
    position: relative;
		width: 100%;
		padding-top: 50px;
		padding-bottom: 40px;
		border-bottom: 1px solid #e5e5e5;
		.stock-item {
			&__link {
				color: #333333;
				font-size: 22px;
				font-weight: 500;
				letter-spacing: 0.55px;
				line-height: 60px;
			}
			&:before {
				content: url(../img/icons/ar-right.svg);
				margin-right: 20px;
			}
			.catalog-panel {
				display: none;
				z-index: 2;
				position: absolute;
				left: 0;
				top: 0;
				background-color: #ffffff;
				width: 100%;
				.catalog-btn {
					padding-left: 25px;
					color: #333333;
					font-size: 15px;
					font-weight: 500;
					letter-spacing: 0.38px;
					line-height: 34px;
					&.arrow {
						background-image: url(../img/icons/ar-right.svg);
						background-repeat: no-repeat;
						background-position: left center;
					}
					&:hover {
						color: #af2e2e;
					}
				}
				.header {
					margin-top: 30px;
					border-bottom: none;
					width: 100%;
					display: flex;
          justify-content: space-between;					  .back {
            width: 20px;
            height: 20px;
            display: block;
            background-color: green;
          }
					.catalog-close {
						position: relative;
						z-index: 1;
						cursor: pointer;
						transform: rotate(45deg);
						width: 15px;
						height: 15px;
						&:before {
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							height: 18px;
							width: 3px;
							background-color: #333333;
						}
						&:after {
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 18px;
							height: 3px;
							background-color: #333333;
						}
					}
				}
				.title {
					margin-top: 46px;
					width: 100%;
					color: #af2e2e;
					font-size: 20px;
					font-weight: 500;
					letter-spacing: 0.5px;
					line-height: 60px;
				}
				.sub-title {
					margin-bottom: 34px;
					padding-left: 26px;
					width: 100%;
					color: #af2e2e;
					font-size: 18px;
					font-weight: 500;
					letter-spacing: 0.45px;
				}
				.footer-img {
					img {
						width: 100%;
					}
				}
			}
		}
	}
View Compiled
$(document).ready(function(){
    var body = $('body');

    $('.stock-item').click(function(){
      $(this).children('.catalog-panel').show();
    });
    $('.catalog-btn').click(function(){
      $(this).siblings('.catalog-panel').show();
    });
    $('.catalog-close').click(function(){
      $(this).parents('.catalog-panel.first').hide();
    });
    $('.back').click(function(){
      $(this).closest('.catalog-panel').hide();
    });
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js