文、意如
<html>
<head>
<title>多層導覽列</title>
<style>
/* 導覽列區塊設定 */
nav {
background-color: #333; /* 導覽列背景為深灰色 */
padding: 10px; /* 四周內距為 10px */
}
/* 取消 ul 的預設項目符號、外距與內距，並排呈現 li */
nav ul {
list-style: none; /* 移除項目符號 (•) */
margin: 0; /* 取消外距 */
padding: 0; /* 取消內距 */
display: flex; /* 使用彈性排版，讓第一層選單橫向排列 */
}
/* 每個選單項目設定為相對位置，方便絕對定位子選單 */
nav li {
position: relative; /* 為了讓內部的 ul 可以絕對定位 */
}
/* 第一層選單項目之間的間距 */
nav > ul > li {
margin-right: 20px; /* 右側間距 20px，讓選單不擠在一起 */
}
/* 導覽列中的連結樣式 */
nav a {
text-decoration: none; /* 取消超連結底線 */
color: white; /* 文字顏色為白色 */
padding: 8px 12px; /* 內距：上下 8px、左右 12px */
display: block; /* 區塊顯示，讓整塊區域都能點擊 */
}
/* 滑鼠滑過時的樣式 */
nav a:hover {
background-color: #555; /* 滑過時背景變成淺灰色 */
border-radius: 4px; /* 邊角圓弧化 4px */
}
/* 第二層選單設定 */
li ul {
display: none; /* 預設不顯示子選單 */
position: absolute; /* 絕對定位，使其相對於父層出現 */
top: 100%; /* 子選單出現在父項目正下方 */
left: 0; /* 與左側對齊 */
background-color: #444; /* 背景色深一點，區分層級 */
min-width: 150px; /* 設定最小寬度 */
}
/* 當滑鼠移到 li 上時，顯示對應的子選單 */
li:hover > ul {
display: block; /* 滑鼠移入時顯示子選單 */
}
/* 第三層選單的定位（從第二層 ul 再展開一層） */
li ul li ul {
top: 0; /* 從第二層的頂端開始 */
left: 100%; /* 向右偏移，使其出現在旁邊 */
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li>
<a href="#">產品</a>
<ul>
<li>
<a href="#">電子產品</a>
<ul>
<li><a href="#">手機</a></li>
<li><a href="#">筆電</a></li>
</ul>
</li>
<li><a href="#">家電</a></li>
</ul>
</li>
<li><a href="#">關於我們</a></li>
<li><a href="#">聯絡</a></li>
</ul>
</nav>
</body>
</html>
| 選擇器 | 適用時機 |
|---|---|
nav > ul > li | 只要針對第一層選單調整樣式 |
nav li | 要統一所有層級的選單項目樣式 |
li:hover > ul | 當滑鼠滑過項目時，顯示下層選單 |
挑戰:三層選單 + 自訂樣式
改變背景色與 hover 顏色
自行設計一組三層選單（例如「學校 → 系所 → 科目」）
Yiru@Studio - 關於我 - 意如
