Супер "резиновое" меню на html

var menu-list = document.querySelector('#menu-list');

menu-list.classList.toggle('open');

function koderstrike(){
     function hovertime(o){
         return(o.parentNode && o.parentNode.querySelector(":hover")==o);
     }
         document.getElementById("xsco").addEventListener('mouseover',function(){
             if(hovertime(this)) document.getElementById("super-list").classList.toggle('logavo1');
             ), false

 let list = document.querySelectorAll('.item');

this.classList[1][7]; // Номер смотрится так. Идея в том, что мы берём из списка классов второй класс (т.к. счёт идёт с нуля) и оттуда 7й элемент, т.е. цифру.

list.(querySelector('.active');

function koderstrike(){
     let list= document.querySelectorAll('.item');
     list.addEventListener('mouseover',drupalniktwo,false);
     list.querySelector('.active');
     for(var i=0; i<drupalniktwo; i++){  
         list.classList.toggle('active');
         setTimeout(func, 3000);
     }       
     function drupalniktwo(){
         list.this.classList[1][7];
     }
}

list[i]

if (list[i + 1]) {
list[i].classList.remove('active');
list[i+1].classList.add('active');
}

list.querySelector('.active');
     for(var i=0; i<drupalniktwo; i++){  
         list.classList.toggle('active');
         setTimeout(func, 3000);
     }

// Находим элементы, при наведении на которые будет что-то происходить.
var list = document.querySelectorAll('.item');
 
// Добавляем КАЖДОМУ (!!!) из элементов слушателя, который будет ждать, 
// пока на кого-то из них наведут мышь, и при наведении запустит функцию
for (var i = 0; i < list.length; i++) {
  list[i].addEventListener('mouseover', startSwitchingElements, false)
}
 
// Собственно, действия при наведении на элемент
function startSwitchingElements() {
  // Находим элемент, который сейчас активен
  var activeElement = document.querySelector('.item.active');
  // Вариант list.querySelector('.active'); работать не будет, т.к. list - это МАССИВ элементов, querySelector не работает с массивами.
 
  // Получаем номер активного элемента
  var activeElementNumber = activeElement.classList[1][7];
 
  // Узнаём, на какой по счёту элемент мы навели мышь
  var hoverElementNumber = this.classList[1][7];
 
// Теперь у нас есть два номера - номер активного элемента 
// и номер элемента, на который навели мышь.
  
// Если навели на неактивный элемент, переключаемся на следующий,
// и запускаем цикл переключений. Если на активный - ничего делать не надо.
if (activeElementNumber < hoverElementNumber) {
  // Проверяем, что следующий элемент существует, и если так и есть, убираем класс
  // у текущего элемента и ставим следующему
  if (list[activeElementNumber + 1]) {
    list[activeElementNumber].classList.remove('active');
    list[activeElementNumber + 1].classList.add('active');
  }
  // Т.к. мы уже переключились, увеличиваем номер активного элемента.
  activeElementNumber++;
 
  // Если после первого переключения всё ещё не дошли до элемента, на который навели мышь,
  // запускаем переключения каждые 3 секунды
  if (activeElementNumber < hoverElementNumber) {
    var intervalSwitchingElements = setInterval(function () {
      if (list[activeElementNumber + 1]) {
        list[activeElementNumber].classList.remove('active');
        list[activeElementNumber + 1].classList.add('active');
      }
      // Проверяем, не активировали ли мы элемент, на который навели мышь.
      // Если активировали, прекращаем переключения.
      if (activeElementNumber + 1 == hoverElementNumber) {
        clearInterval(intervalSwitchingElements);
      }
      activeElementNumber++;
    }, 3000);
  }
}
}

var list = document.querySelectorAll('.main-menu__item');
for (var i = 0; i < list.length; i++) {
  list[i].addEventListener('mouseover', startSwitchingElements, false);
}
function startSwitchingElements() {
  var activeElement = document.querySelector('.main-menu__item.active');
  var activeElementNumber = parseInt(activeElement.classList[1][17]);
  var hoverElementNumber = parseInt(this.classList[1][17]);
 
  if (activeElementNumber < hoverElementNumber) {
    if (list[activeElementNumber + 1]) {
      list[activeElementNumber].classList.remove('active');
      list[activeElementNumber + 1].classList.add('active');
      activeElementNumber++;
    }
    if (activeElementNumber < hoverElementNumber) {
      var intervalSwitchingElements = setInterval(function () {
        if (list[activeElementNumber + 1]) {
          list[activeElementNumber].classList.remove('active');
          list[activeElementNumber + 1].classList.add('active');
        }
        if (activeElementNumber + 1 == hoverElementNumber) {
          clearInterval(intervalSwitchingElements);
        }
        activeElementNumber++;
      }, 400);
    }
  }
 
// На случай, если нужно не идти вперёд по пунктам, а вернуться назад.
  if (activeElementNumber > hoverElementNumber) {
    if (list[activeElementNumber - 1]) {
      list[activeElementNumber].classList.remove('active');
      list[activeElementNumber - 1].classList.add('active');
      activeElementNumber--;
    }
 
    if (activeElementNumber > hoverElementNumber) {
      var intervalSwitchingElements = setInterval(function () {
        if (list[activeElementNumber - 1]) {
          list[activeElementNumber].classList.remove('active');
          list[activeElementNumber - 1].classList.add('active');
        }
        if (activeElementNumber - 1 == hoverElementNumber) {
          clearInterval(intervalSwitchingElements);
        }
        activeElementNumber--;
      }, 400);
    }
  }
}