---
# System prepended metadata

title: "\U0001F3C5 Day 25 - 下拉選單"
tags: [網頁切版直播班 - 2024 夏季班]

---

# 🏅 Day 25 - 下拉選單

### 題目

請大家試著理解[下拉選單](https://codepen.io/hexschool/pen/PoRzrpK)的操作，簡單用文字描述這是如何透過 CSS 與 jQuery 做出該效果

> 可以[點我](https://drive.google.com/file/d/1rDb598GbiGXic5kxCrql33e5WAGFdvvN/view?usp=sharing)下載整份檔案查看


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：請同學簡單描述 -->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/eYwdaxY)|
| 2 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/yLdaWPZ)|
| 3 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/jOjMoyp)|
| 4 | Kiwi |[Codepen](https://codepen.io/kiwi1113/pen/WNqGqrW)|
| 5 | yaoling.liang |[Codepen](https://codepen.io/Yao-Ling-L-/pen/PorGvpK)|
| 6 | lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/wvLzLZv)|
| 7 | Sammy |[Codepen](https://codepen.io/fsczdlla-the-bold/pen/PorGMOZ)|
| 8 | yoishere |[Codepen](https://codepen.io/yoishere/pen/vYqyBOG)|
|9|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/KKjNKzO)|
| 10 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/QWXGwvd)|
| 11 | hao jing |[Codepen](https://codepen.io/hjxu/pen/ZEdpxxB)|
| 12 | Jim |[Codepen](https://codepen.io/JimChou/pen/bGPBdEY)|
| 13 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/RwzoGGm)|
| 14 | Noelle |[Codepen](https://codepen.io/NoelleKH/pen/qBzqrdK)|
| 15 | 黛Dye |[Codepen](https://codepen.io/Dye_Note/pen/zYVoZoR)|
| 16 | Kaya |[Codepen](https://codepen.io/kayaribi/pen/QWXGprv)|
| 17 | MY |[Codepen](https://codepen.io/ahmomoz/pen/wvLorjy)|
| 18 | Kerwin |[Codepen](https://codepen.io/kerwin/pen/MWMbErZ)|
| 19 | Sonia |[Codepen](https://codepen.io/YUJOU/pen/WNqodjx)|
| 20 | zaoannihao |[Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/qBzqYXJ)|
| 21 | 陳小廷 |[Codepen](https://codepen.io/ting1124/pen/poXNZKJ)|
| 22 | wind |[Codepen](https://codepen.io/wind7y/pen/KKjNreK)|
| 23 | fendy1223 |[Codepen](https://codepen.io/fendy1223/pen/ExBNzbB)|
| 24 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/jOjVoZK) |
| 25 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/QWXGReJ)|
| 26 | n913239 |[Codepen](https://codepen.io/n913239/pen/KKjaPXe)|
| 27 | Mike |[Codepen](https://codepen.io/mike2049/pen/vYqgYaj?editors=1010)|
| 28 | EdHunag |[Codepen](https://codepen.io/yide1986/pen/oNrBzdJ)|
| 29 | 嚼勁先生 |[Codepen](https://codepen.io/James520284/pen/mdZRwJM)|
| 30 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/KKjajqE)|
| 31 | Chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/dyBNxjQ)|
| 32 | GAVI |[Codepen](https://codepen.io/qbafldcv-the-scripter/pen/eYwvmgB?editors=1000)|
| 33 | 俊 |[Codepen](https://codepen.io/jun12079/pen/ExBWZxq)|
| 34 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/wvLdNYW)|
| 35 | Arvin |[Codepen](https://codepen.io/arvinyang1925/pen/QWXgwOR)|
| 36 | xcx100 |[Codepen](https://codepen.io/c13026/pen/LYKLmpZ)|
| 37 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/wvLeJxN)|
| 38 | Toung | [Codepen](https://codepen.io/Toung/pen/bGPrJNY)
| 39 | Emma |[Codepen](https://codepen.io/Emma0919/pen/BagwZPz)|
| 40 | emmayo |[Codepen](https://codepen.io/emmayo/pen/OJexQdY)|
| 41 | Enn |[Codepen](https://codepen.io/enntang/pen/YzoapjW)|
| 42 | OSN |[Codepen](https://codepen.io/osncodepen/pen/NWZBjmb)|
| 43 | chris |[Codepen](https://codepen.io/chris-chen-the-selector/pen/PorLoza)|
| 44 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/MWMMmxr) |
| 45 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/dyBxpJW) |
| 45 | zen | [Codepen](https://codepen.io/zen742937/pen/gOVYQob)
<!-- 
| No | Discord |[Codepen]()|
-->