今天要講的是 金魚都能懂的網頁切版 : 多層次收合選單 NO015，
不過我要講的只有多層次選單的 part，
收合的部分計畫明天再來打。

本篇關鍵字

• ul、li
• position: absolute
• transform: translate()
• z-index
• 子代選取器

範例檔

HTML

  <header class="main-header">
    <div class="container">
      <h1><a href="#">Zombie@Dump</a></h1>
      <nav>
        <ul class="main-menu">
          <li><a href="#">關於我們</a></li>
          <li>
            <a href="#">作品們</a>
            <ul class="sub-menu">
              <li><a href="#">作品一</a></li>
              <li><a href="#">作品二</a></li>
              <li><a href="#">作品三</a></li>
              <li><a href="#">作品四</a></li>
              <li><a href="#">作品五</a></li>
            </ul>
          </li>
          <li><a href="#">聯絡我們</a></li>
        </ul>
      </nav>
    </div>
  </header>

CSS
(跟昨天的長得差不多，我只放有修改以及新增的部分)

.main-menu {
  display: flex;
  position: relative; /* 多這一行 */
}

/* 原本為 .main-menu li::after */
.main-menu>li::after {
  content: '';
  position: absolute;
  height: 4px;
  left: 50%;
  right: 50%;
  bottom: 0;
  background-color: #fff;
  transition: .5s;
}

/* 原本為 .main-menu li:hover::after */
.main-menu>li:hover::after {
  left: 0;
  right: 0;
}

/* 這邊都是新增的 */
.sub-menu {
  position: absolute;
  left: 50%;
  background-color: rgba(232, 48, 21, 0.8);
  width: 150%;
  text-align: center;
  transform: translate(-50%, -150%);
  transition: .8s;
  z-index: -1;
}

.main-menu li:hover .sub-menu {
  transform: translate(-50%, 0);
}

喪屍分解

• 在 li 中多包一層 ul，製作下層選單
• 利用 position: absolute 將 .sub-menu 獨立出一層來
• 使用 子代選取器 讓 ::after 只會出現在第一層子層
  （子代選取器教學）
• 使用 transform: translate() 設定選單位置以及做出選單滑下來的效果
• 設定 z-index: -1 將 .sub-menu 的層往後放，否則會蓋在 .main-header 上面

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是 Navbar - 收合選單。