.caption-container {
    text-align: center; 
    font-size: 24px;
    padding: 2px;
    color: white; 
    background-color: #FFB6C1; /* 這是標準的淺粉紅色 LightPink */
}


li {
text-align: center; border-bottom: 1px solid #555;
}
li:last-child {
text-align: center; border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 當前選中狀態 (Active) */
li a.active {
    background-color: #FF8C00; /* 換成橘色 */
    color: white;
}

/* 滑鼠移入狀態 (Hover) */
li a:hover {
    background-color: #FF8C00; /* 換成橘色 */
    color: white;
}

.nav-list {
    display: block !important; /* 強制切換為區塊模式，確保換行 */
    list-style-type: none;
    margin-top: 0;
    padding: 0;
    width: 100%;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

.nav-list li {
    display: block; /* 確保每個 li 佔據一整行 */
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #555;
}

.nav-list li:last-child {
    border-bottom: none; /* 最後一項不留底線 */
}

.nav-list li a {
    display: block; /* 讓點擊範圍撐滿整個長方形 */
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
}

/* 滑鼠經過時變色，增加互動感 */
.nav-list li a:hover {
    background-color: #ddd;
}
/* 下拉選單的樣式 */
/* 1. 主按鈕容器：確保它是相對定位的基準點 */
.drop-menu {
    color: rgb(71, 6, 6);
    padding: 0; /* 調整 padding 以免撐開高度 */
    margin: 0;
    cursor: pointer;
    display: inline-block;
    width: 115px;
    text-align: center;
    height: 50px;
    line-height: 50px; /* 建議與 height 一致，文字才會置中 */
    vertical-align: middle;
    position: relative; /* 關鍵：讓子選單根據這裡定位 */
    background-color: #FF8C00; /* 補上你圖中的綠色底色 */
}

.drop-menu:hover {
    background-color: #FF8C00;
}

/* 2. 下拉清單容器：改為絕對定位 */
.dropDown-menu {
    position: absolute; /* 關鍵：改為絕對定位 */
    top: 100%;          /* 從父元素底部開始計算 */
    left: 0;            /* 靠左對齊父元素 */
    margin: 0;          /* 移除原本的 -50px margin，那會導致選單往上縮 */
    padding: 0;
    background-color: #FF8C00; /* 改為跟按鈕一樣的綠色 */
    list-style-type: none;
    width: 115px;       /* 建議跟父元素寬度一致，或自訂寬度 */
    z-index: 1000;
    display: none;      /* 預設隱藏，hover 時才顯示 */
}

/* 3. 當滑鼠移到主按鈕時，顯示選單 */
.drop-menu:hover .dropDown-menu {
    display: block;
}

/* 4. 下拉清單內的 li 與 a */
.dropDown-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.2); /* 加上分隔線 */
}

.dropDown-menu a {
    color: white;       /* 配合深色底改為白色 */
    text-decoration: none;
    text-align: center; /* 改為置中較美觀 */
    display: block;
    padding: 10px 0;    /* 增加點擊範圍 */
    line-height: normal; /* 重設行高以免繼承父元素 */
}

.dropDown-menu a:hover {
    background-color: #FF8C00; /* 跟你的 active 狀態統一樣式 */
}