---
# System prepended metadata

title: "\U0001F3C5 Day 26"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 26

## 下拉選單

### 題目

請大家試著理解[下拉選單](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 / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|    Anna Liu#3794    |      [codePen](https://codepen.io/anna618/pen/bGvaJRz)       |
|    黃士桓#7654    |      [codePen](https://codepen.io/shr-huan-huang/pen/VwXyXza)       |
|    布魯諾#7239    |   [codePen](https://codepen.io/bruno-yu/pen/gOeoeRW?editors=1010)   |
|   CloThEs#7837    |         [codePen](https://codepen.io/CloThEsZ/pen/YzaYaEG)          |
|  Iris Huang#6727  |          [CodePen](https://codepen.io/ythuang/pen/wvmpmyy)          |
|   Daisy_Li#4231   |    [CodePen](https://codepen.io/lidairong-gmail-com/pen/LYdeddG)    |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/jOzYzdX?editors=1010) |
|    JackC#0411     |          [CodePen](https://codepen.io/key0329/pen/VwXyXNp)          |
|    Clara#1275     |         [CodePen](https://codepen.io/bsupixqu/pen/WNzdzyK)          |
|     大衛#4869     |         [CodePen](https://codepen.io/exnsrpjc/pen/ExEoERx)          |
|      YI#0863      |          [CodePen](https://codepen.io/YI0305/pen/qBopYbR)           |
|  Clara Cai#7097   |        [CodePen](https://codepen.io/Clara-Snowy/pen/vYRpjYe)        |
|     威爾#1694     |          [CodePen](https://codepen.io/WILL_Wu/pen/BarJxpG)          |
|  Potatolee#7749   |        [CodePen](https://codepen.io/potatoleee/pen/dymJeRZ)         |
|  LHchien33#6232   |         [CodePen](https://codepen.io/lin_chien/pen/poLpVav)         |
|    Benson#6763    |         [CodePen](https://codepen.io/kumashow/pen/BarJxqe)          |
|     小諾#1866     |          [CodePen](https://codepen.io/noichan/pen/ZExvoVp)          |
|    azami#5986     |           [CodePen](https://codepen.io/azami/pen/MWVrGxj)           |
|     威0#6919      | [Codepen](https://codepen.io/n0918679182/pen/abYEGxL?editors=0010)  |
|      Ke#1391      |         [Codepen](https://codepen.io/federerke/pen/GRxyGrV)         |
|     int#7518      |   [Codepen](https://codepen.io/intHuang/pen/RwMxJRO?editors=1010)   |
|  s339428326#7402  |        [Codepen](https://codepen.io/s339428326/pen/gOeoKQP)         |
|     yuyu#6310     |         [Codepen](https://codepen.io/yuyu0905/pen/BarJVqz)          |
|     𝓛𝓊𝒸𝓎#8635     |         [Codepen](https://codepen.io/lucygirl/pen/RwMxBNr)          |
|     zera#6060     |        [codePen](https://codepen.io/zera-tseng/pen/wvmpXVJ)         |
|    Chi#7605       |           [Codepen](https://codepen.io/YoChi84/pen/poLpVwo)         |
|逸川 #6319 | [CodePen](https://codepen.io/bryanlin8911/pen/vYRpagK)
|     黑白兔#0684     |        [codePen](https://codepen.io/johnny329/pen/mdxpjwR)      |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/poLpZPZ) |
| Joyce#3790 |[CodePen](https://codepen.io/joycehuang/pen/dymJjLN)|
| 雷雷#7844|[CodePen](https://codepen.io/lei-yi-jie/pen/ZExvjwd)|
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/zYWpJwB)|
| Tuhacrt#0008 |[Codepen](https://codepen.io/Tuhacrt/pen/VwXyEwE)|
| Erichooojop#8199 |[CodePen](https://codepen.io/lumedkle/pen/NWYXONG)|
|WEI_RIO#9342|[CodePen](https://codepen.io/wei_wu/pen/ZExvmzR)|
|Amberhh#2465|[CodePen](https://codepen.io/Amberhh/pen/PoREddV)|
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/rNdpPBm) |
|RayChen#6088|[CodePen](https://codepen.io/raychen1996/pen/abYEXZq)|
| Yunei#6323 |[CodePen](https://codepen.io/Yunei/pen/RwMxEve)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/ExEormE)|
|    小白#2406     | [CodePen](https://codepen.io/gracewhite/pen/gOeoKZP)|
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/bGvaZLL)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/oNqpONB)|
|    YU #0618    |      [CodePen](https://codepen.io/yoken_/pen/QWmaoOr)       |
|    鉦勝 #8333    |      [CodePen](https://codepen.io/atckmax823/pen/poLpBZJ)       |
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/BarJEqE) |
| Yuna Huang#2692 | [Codepen](https://codepen.io/Yuna1002/pen/rNdpgEr) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/yLKopYg)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/RwMxzxo)|
 |yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/jOzYjPa)| 
 |IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/ExEozMd)|
 |Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/MWVrNzy)|
 |ajhappy#6488|[Codepen](https://codepen.io/ajhappy5438/pen/rNdJxYx)|
 |阿翰 #1984|[Codepen](https://codepen.io/JohnHan05/pen/WNzMwjr)|
 |Hsiu #8767|[Codepen](https://codepen.io/amy-hsiu/pen/YzaeqNd?editors=0110)|
 |choubree #4350|[Codepen](https://codepen.io/BreeChou/pen/OJvzdXL)|
 |Melon #0380|[Codepen](https://codepen.io/BalaFang/pen/NWYygLy)|
 |Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/vYRdJJW)|
 |Fang #4680|[Codepen](https://codepen.io/std95174/pen/vYRdRQX)|
 |NeilLin#3009|[Codepen]( https://codepen.io/a0071421/pen/zYWRmej)|
 |咻蹦#1526|[Codepen](https://codepen.io/emmasyu/pen/OJvQaBg)|
  |Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/jOzZoZr)|
 |hungya#0773|[Codepen]( https://codepen.io/hungya777/pen/PoRQrzN)|
 |sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/YzaaqyL)|
 |Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/abYYywO?editors=0110)|
 |aki|[codepen](https://codepen.io/aki168/pen/qBooeqd)|
 |mei#8421|[codepen](https://codepen.io/Shila-Chen/pen/RwMyMYw)|
 |艾芮絲#6060|[codepen](https://codepen.io/wangyingju/pen/BarxONW)|
 |QOO#8446|[codepen](https://codepen.io/QOOQOOQ/pen/gOezpzq)|
 |紙飛機 #1335|[codepen]( https://codepen.io/paperplanea/pen/GRxGmeY)|
 |Tori #1248|[codepen]( https://codepen.io/FlyTori/pen/eYMLNMw)|
 |Pony#6778|[codepen](https://codepen.io/Pony0303/pen/MWVBrqX)|
 |狸貓#5863|[codepen](https://codepen.io/tanuki320/pen/bGvmbmv)|
|yuchenye#6119|[codepen](https://codepen.io/yuchen/pen/KKoGWWg)|
 |Shuo#1596|[codepen]( https://codepen.io/chiangchungshuo/pen/jOzeoGY)|
 |kancheng#3915|[codepen](https://codepen.io/kancheng/pen/NWYEeJG)| 
 |Manson許#2295|[codepen](https://codepen.io/oupbzfxq-the-scripter/pen/LYdMzyM)| 
 |Rena#6249|[codepen](https://codepen.io/aureate0116/pen/WNzLdwm)|
 |NathanJames#8120|[codepen](https://codepen.io/ufo060204/pen/JjLwaxM)|
 |Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/BarvqXp)|
 |Deborah#0033|[CodePen](https://codepen.io/deborah-tsai/pen/QWmYLeM)|
 |jin.huang#4666|[CodePen](https://codepen.io/haha1196/pen/xxWepgK)|
 |RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/zYjoLaK)|