/* 導覽列容器 */
.nav-container {
    background-color: #ecf0f1; /*  導覽列背景色#ecf0f1 */
    width: 960px; /* 根據內容最大寬度決定 */
    font-family: Arial, sans-serif; /*使用 Arial 字型，沒有就用系統預設無襯線字體*/
    font-size: 14px; /*導覽列文字大小*/
    color: white; /* 預設文字顏色為藍色（子元素若沒指定顏色會繼承）*/
}

/* 第一層選單 (水平) */
.main-menu {
    background-color: #7132cd; /*第一層選單 背景色#0094ff */
    display: flex; /* 讓 <li> 水平排列flex:彈性 垂直:block 方塊*/
    /*width: fit-content;*/ /* 根據內容寬度自動調整 */
    width: 100%; /* 根據內容最大寬度決定 */
    list-style: none; /*移除 <ul> 預設的小圓點*/
    margin: 0; /*清除瀏覽器預設間距，讓排版更乾淨*/
    padding: 0px 0px 0px 0px; /* 0px 上 0px 右 0px 下 0px 左 */
   
}

.menu-item {
    position: relative; /* 讓子選單相對於此定位 */
}

    /* 如果是最後一個選單項目，可以改用 right: 0 */
    .menu-item:last-child .sub-menu {
        left: auto;
        right: 0;
    }
    /*選單連結樣式*/
    .menu-item a {
        display: block;
        padding: 5px 10px;
        color: white; /*  前台第1層字體顏色 */
        text-decoration: none;
    }
    /*滑鼠移上去效果（Hover）*/
    .menu-item a:hover {
        background-color: yellowgreen;
    }
    

/* 第二層選單 (預設隱藏) */
.sub-menu {
    display: none; /* 隱藏 */
    position: absolute; /* 絕對定位 */
    top: 100%; /* 出現在第一層下方 */
    left: 0; /* 與第一層左邊對齊 */

    background-color:#ffd800;
    /* 自動撐開設定 */
    /*min-width: 100%;*/ /* 至少跟第一層一樣寬 */
    width: max-content; /* 根據內容最大寬度決定 */
    list-style: none;
    padding: 0;
    box-shadow: 0 8px 12px rgba(0,0,0,0.2);
    z-index: 100; /*確保子選單蓋在其他元素上*/
}

    .sub-menu li a {
        white-space: nowrap; /* 強制文字不要折行 */
        color: #333;
        padding: 5px 15px;
        border-bottom: 1px solid #ddd;
    }

        .sub-menu li a:hover {
            background-color: #bdc3c7;
        }

/* 滑鼠移過第一層時，顯示第二層 */
.menu-item:hover .sub-menu {
    display: block; /*由 none → block  形成「滑入下拉選單」效果*/
}

/* --- 第三層選單專用樣式 --- */
.sub-menu-item {
    position: relative; /* 關鍵：讓第三層相對於第二層定位 */
}

.grandchild-menu {
    display: none; /* 預設隱藏 */
    position: absolute;
    top: 0; /* 與第二層項目的頂部對齊 */
    left: 100%; /* 出現在第二層的右側 */
    background-color: #ff6a00;
    min-width: 200px;
    list-style: none;
    padding: 0;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    z-index: 101;
}

/* 滑鼠移過第二層時顯示第三層 */
.sub-menu-item:hover .grandchild-menu {
    display: block;
}

/* 提示有第三層的小箭頭 */
.sub-menu-item:has(.grandchild-menu) > a::after {
    content: " \276F"; /* 顯示 ❯ 符號 */
    float: right;
    font-size: 10px;
}