const triggers = document.querySelectorAll('.cool > li');
// 抓取各別的選單
const background = document.querySelector('.dropdownBackground');
// 抓取白底部分
const nav = document.querySelector('.top');
// 抓取主導覽列

function handleEnter() {
    this.classList.add('trigger-enter');
    // 新增 class
    setTimeout(() => this.classList.add('trigger-enter-active'), 150)
    // 0.15毫秒後新增 class
    background.classList.add('open');
    // 新增白底樣式的 class
}

function handleLeave() {
    this.classList.remove('trigger-enter', 'trigger-enter-active');
    background.classList.remove('open');
    // 移除相關class
}
triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter))
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave))

function handleEnter() {
    this.classList.add('trigger-enter');
    // 新增 class
    setTimeout(() => this.classList.add('trigger-enter-active'), 150)
    // 0.15毫秒後新增 class
    background.classList.add('open');
    // 新增白底樣式的 class

    const dropdown = this.querySelector('.dropdown');
    // 取得導覽底下的下拉導覽
    const dropdownCoords = dropdown.getBoundingClientRect();
    // 取得下拉導覽的資訊
    const navCoords = nav.getBoundingClientRect();
    // 取得導覽列的資訊

    const coords = {
        height: dropdownCoords.height,
        width: dropdownCoords.width,
        top: dropdownCoords.top,
        left: dropdownCoords.left
    }
    // 取得下拉導覽座標

    background.style.setProperty('width', `${coords.width}px`);
    background.style.setProperty('height', `${coords.height}px`);
    background.style.setProperty('transform', `translate(${coords.left}px,${coords.top}px)`)
        // 設定白底樣式滑入的寬高及定位
}

function handleEnter() {
...
...
  const coords = {
        height: dropdownCoords.height,
        width: dropdownCoords.width,
        top: dropdownCoords.top - navCoords.top,
        left: dropdownCoords.left - navCoords.left
            // 減去主導覽列的定位
    }
...
...
}

setTimeout(() => 
this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);