переделал меню pc на ul

assets/css/gp-style-desktop.css

@@ -114,6 +114,7 @@
 .header-menu__list li:first-child{
     margin-left: 0;
 }
+
 .header-menu__list a{
     color: var(--text-white);
     text-decoration: none;
@@ -127,18 +128,16 @@
 
     display: block;
 }
-.header-menu-list-next__block{
-    position: relative;
-}
-.header-menu-list-next__content{
+.header-menu-list__sub{
+    margin-top: 30px;
+
     position: absolute;
-    top: 50px;
-    left: 0;
 
     width: 300px;
 
     padding: 14px 0;
 
+    list-style-type: none;
     background-color: var(--background-grey);
 
     opacity: 0;
@@ -146,66 +145,53 @@
 
     transition: all .3s;
 }
-.header-menu-list-next__content.active{
+.header-menu-list__sub.open{
     opacity: 1;
     pointer-events: auto;
 }
-.header-menu-list-next-content__item{
-    display: block;
-
+.header-menu-list__sub li{
+    margin-left: 0;
+}
+.header-menu-list__sub li > a{
     padding: 14px 24px;
 
-    font-weight: 400;
-    font-size: 16px;
-    text-transform: uppercase;
-    color: var(--text-white);
+    transition: all .3s;
 
+    display: block;
+}
+.header-menu-list__sub > li:hover{
+    padding-right: 23px;
+
+    background-color: var(--background-grey-hover);
+    border-right: 1px solid var(--text-white);
+}
+.header-menu-list__sub > li > ul{
     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__sub > li:hover > ul{
+    opacity: 1;
+    pointer-events: auto;
 }
-.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{
+.header-menu-list__sub ul{
     position: absolute;
     top: 0;
-    left: 300px;
+    left: 100%;
+
+    width: 100%;
+    height: 100%;
 
     display: block;
 
-    min-height: 100%;
-    width: 300px;
-
-    padding: 12px;
     background-color: var(--background-grey-hover);
-
-    display: flex;
-    flex-direction: column;
+    list-style-type: none;
 
     opacity: 0;
     pointer-events: none;
-    transition: all .6s;
 }
-.header-menu-list-next__content-next.active{
+.header-menu-list__sub ul.open{
     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;
     align-items: center;

assets/js/main.js

@@ -163,51 +163,31 @@ function howPhone() {
 // how end
 
 // phone menu
-let btnOpenMenu = document.querySelector('.button-menu__open');
+let listMenu = document.querySelectorAll('.header-menu__list > li');
 
-btnOpenMenu.onclick = function () {
-    let phoneMenu = document.querySelector('.phone-menu'),
-        block = document.querySelector('.phone-menu__block-content.main'),
-        content = document.querySelector('.phone-menu__content.main'),
-        newHeigh = content.offsetHeight + 'px';
+listMenu.forEach(li => {
+    if (li.querySelector('.header-menu-list__next')) {
+        let nextButton = li.querySelector('.header-menu-list__next'),
+            sub = li.querySelector('.header-menu-list__sub');
 
-    phoneMenu.classList.add('active');
-    // block.classList.add('active');
-    block.style.height = newHeigh;
-}
+        nextButton.addEventListener('mouseover', function (event) {
+            let openSubMenu = document.querySelector('.header-menu-list__sub.open');
 
-let closeMainMenu = document.querySelector('.phone-menu-content__close.main');
+            if (openSubMenu) {
+                openSubMenu.classList.remove('open');
+            }
 
-closeMainMenu.onclick = function () {
-    let phoneMenu = document.querySelector('.phone-menu'),
-        block = document.querySelector('.phone-menu__block-content.main'),
-        content = document.querySelector('.phone-menu__content.main');
+            sub.classList.add('open');
+        })
 
-    phoneMenu.classList.remove('active');
-    block.style.height = 0;
-}
-
-
-let nextPhoneMenu = document.querySelectorAll('.phone-menu--next');
-
-nextPhoneMenu.forEach(next => {
-    next.onclick = function () {
-        let subName = next.dataset.menu,
-            blockSub = document.querySelector(`.phone-menu__sub.${subName}`);
-        
-        blockSub.classList.add('active');
-    }
+        sub.addEventListener('mouseout', function (event) {
+            if (event.relatedTarget.offsetParent.tagName != 'UL') {
+                sub.classList.remove('open');
+            }
+        })
+    };
 })
 
-let subPhone = document.querySelectorAll('.phone-menu__sub');
-
-subPhone.forEach(menu => {
-    let close = menu.querySelector('.phone-menu-content__close');
-
-    close.onclick = function () {
-        menu.classList.remove('active');
-    }
-})
 // phone menu end
 
 // search