hzzzzl

Тут просто рутина

.... 
let timeout = null

function openSubMenu() {
// если курсор опять в меню, то очищаем таймаут
clearTimeout(timeout)
..
}

function closeSubMenu() {

timeout = setTimeout(() => {
    this.classList.remove("active");
    mainSub.classList.remove("active");
    aboutSub.classList.remove("active");
    gallerySub.classList.remove("active");
    forWomenSub.classList.remove("active");
    forMenSub.classList.remove("active");
    babySub.classList.remove("active");
    blogSub.classList.remove("active");
}, 2000)   // через 2 секунды после того как курсор уйдет из меню

}

Но есть проблема: при переносе второго элемента на другую строку

@media (max-width: 600px) {  /*  при 600 рх */
  .element2 {  
    flex-basis: 100%;    /*   на всю ширину */ 
  }
}

.price__item {
	animation: bounce 2s 170ms infinite ease; 
        /* 170ms это задержка, поиграться с разными значениями */
}