сделал pc меню

assets/css/gp-style-desktop.css

@@ -124,6 +124,87 @@
     background-image: url(/assets/img/icon/arrow-bottom.svg);
     background-repeat: no-repeat;
     background-position: center right;
+
+    display: block;
+}
+.header-menu-list-next__block{
+    position: relative;
+}
+.header-menu-list-next__content{
+    position: absolute;
+    top: 50px;
+    left: 0;
+
+    width: 300px;
+
+    padding: 14px 0;
+
+    background-color: var(--background-grey);
+
+    opacity: 0;
+    pointer-events: none;
+
+    transition: all .3s;
+}
+.header-menu-list-next__content.active{
+    opacity: 1;
+    pointer-events: auto;
+}
+.header-menu-list-next-content__item{
+    display: block;
+
+    padding: 14px 24px;
+
+    font-weight: 400;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    transition: all .3s;
+}
+.header-menu-list-next-content__item:hover{
+    padding-right: 23px;
+
+    border-right: 1px solid var(--text-white);
+    background-color: var(--background-grey-hover);
+}
+.header-menu-list-next-content__item.active{
+    padding-right: 23px;
+
+    border-right: 1px solid var(--text-white);
+    background-color: var(--background-grey-hover);
+}
+.header-menu-list-next__content-next{
+    position: absolute;
+    top: 0;
+    left: 300px;
+
+    display: block;
+
+    min-height: 100%;
+    width: 300px;
+
+    padding: 12px;
+    background-color: var(--background-grey-hover);
+
+    display: flex;
+    flex-direction: column;
+
+    opacity: 0;
+    pointer-events: none;
+    transition: all .6s;
+}
+.header-menu-list-next__content-next.active{
+    opacity: 1;
+    pointer-events: auto;
+}
+.header-menu-list-next-content-next__item{
+    padding: 12px;
+
+    font-weight: 400;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: var(--text-white);
 }
 .header-menu__search{
     display: flex;
@@ -291,7 +372,12 @@
 
     padding: 20px;
 }
-
+.header-menu-list-next__content {
+    top: 72px;
+}
+.header-menu-search__block {
+    top: 78px;
+}
 /* header */
 .header__wrapper{
     flex-wrap: wrap;

assets/js/main.js

@@ -284,6 +284,53 @@ phoneInputs.forEach(phoneInput => {
     });
 })
 
+// pc menu
+
+let blocksMenu = document.querySelectorAll('.header-menu-list-next__block');
+
+blocksMenu.forEach(block =>{
+    let button = block.querySelector('.header-menu-list__next'),
+        content = block.querySelector('.header-menu-list-next__content');
+
+    button.onclick = function () {
+        content.classList.add('active');
+    }
+
+    let nextButtons = block.querySelectorAll('.header-menu-list-next-content__item');
+
+    nextButtons.forEach(button => {
+        let className = button.dataset.menu;
+        
+        if (typeof className == 'undefined') return;
+
+        button.onclick = function () {
+            if (block.querySelector('.header-menu-list-next-content__item.active')) {
+                block.querySelector('.header-menu-list-next-content__item.active').classList.toggle('active');
+                block.querySelector('.header-menu-list-next__content-next.active').classList.toggle('active');
+            }
+            
+            
+            button.classList.toggle('active');
+            document.querySelector(`.header-menu-list-next__content-next.${className}`).classList.toggle('active');
+
+        }
+    })
+
+    content.addEventListener('mouseout', function (event) {
+        if (event.relatedTarget.offsetParent.classList.contains('header-menu-list-next__content-next')) return;
+
+        if (event.relatedTarget.offsetParent != content) {
+            content.classList.remove('active');
+            content.querySelectorAll('.header-menu-list-next__content-next.active').forEach(next => {
+                next.classList.remove('active');
+            })
+            block.querySelector('.header-menu-list-next-content__item.active').classList.remove('active');
+
+            content.removeEventListener("mouseout", handleMouseDown, false);
+        }
+    })
+    
+})
 
 // resize
 window.addEventListener('resize', () => {

index.html

@@ -112,10 +112,46 @@
                             <a href="#">О компании</a>
                         </li>
                         <li >
-                            <a href="#" class="header-menu-list__next">каталог</a>
+                            <div class="header-menu-list-next__block">
+                                <a href="#" class="header-menu-list__next">каталог</a>
+
+                                <div class="header-menu-list-next__content">
+                                    <a href="#" class="header-menu-list-next-content__item" data-menu="cardio">
+                                        Кардио
+                                    </a>
+
+                                    <a href="#" class="header-menu-list-next-content__item"  data-menu="cardio-1">
+                                        механическое кардио
+                                    </a>
+
+                                    <a href="#" class="header-menu-list-next-content__item">
+                                        силовые тренажеры
+                                    </a>
+                                    
+                                    <a href="#" class="header-menu-list-next-content__item">
+                                        скамьи
+                                    </a>
+
+                                    <div class="header-menu-list-next__content-next cardio">
+                                        <a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
+                                        <a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
+                                        <a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
+                                        <a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
+                                    </div>
+
+                                    <div class="header-menu-list-next__content-next cardio-1">
+                                        <a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
+                                        <a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
+                                        <a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
+                                        <a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
+                                    </div>
+                                </div>
+                            </div>
                         </li>
                         <li>
-                            <a href="#" class="header-menu-list__next">бренды</a>
+                            <div class="">
+                                <a href="#" class="header-menu-list__next">бренды</a>
+                            </div>
                         </li>
                         <li>
                             <a href="#">зонирование</a>