---
# System prepended metadata

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

---

### 題目

請大家試著理解[下拉選單](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 / 答案                      |
|:-:|:----------------:|:--------------------------------------------------------------:|
| 01 |pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/MWzzggq)|
| 02 |Moreene|[CodePen](https://codepen.io/Moreene/pen/poQQzzK)|
| 03 |hebin.|[CCodepen](https://codepen.io/landyhsiao776/pen/PoxxYNj)|
| 05 |Vic_Liou|[CodePen](https://codepen.io/allenliou-java/pen/vYQQBOK)|
| 06 |小夏|[CodePen](https://codepen.io/michaelhsia/pen/RwqqbWG)|
| 07 |rjjq|[CodePen](https://codepen.io/rjjq/pen/BaGGBQm)|
| 08 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/dyQQbMG)|
| 09 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/VwVVZmj)|
| 10 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/KKrrPWG) |
| 11 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/qBQQWpZ) |
| 12 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/rNQQBpX) |
| 13 | townyuan | [Codepen](https://codepen.io/townyuan/pen/xxQQKqb) |
| 14 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/OJaaLZv) |
| 15 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/ZEmmzeP) |
| 16 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/NWEEKOO) |
| 17 | m_m | [Codepen](https://codepen.io/minnn7716/pen/XWyyrqW) |
| 18 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/abQQoXN) |
| 19 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/XWyyrOb?editors=1100) |
| 20 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/XWyyrob) |
| 21 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/dyQQyeK) |
| 22 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/KKrrKrz) |
| 23 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/jOQQOzP?editors=0100) |
| 24 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/jOQQORq) |
| 25 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/wvQQBwa) |
| 26 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/rNQQaLp) |
| 27 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/RwqqNaz) |
| 28 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/wvQQvZv) |
| 29 | eric0529 | [Codepen](https://codepen.io/delichaomoon/pen/OJaaPXV) |
| 30 | Uli | [Codepen](https://codepen.io/uli1313/pen/BaGGyxL?editors=1100) |
| 31 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/QWJJLpB) |
| 32 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/eYQQNKq) |
| 33 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/YzRRywY) |
| 34 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/BaGGoQM) |
| 35 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/bGQQVZN) |
| 36 | Cura | [Codepen](https://codepen.io/curalin/pen/qBQQbbM?editors=1010) |
| 37 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/oNQQbLJ?editors=1100) |
| 38 | wind | [Codepen](https://codepen.io/wind7y/pen/eYQQJMr) |
| 39 | 依依| [Codepen](https://codepen.io/Rita-Yang/pen/KKrrVRX?editors=1100) |
| 40 | soniawu| [Codepen](https://codepen.io/YUJOU/pen/BaGGKod) |
| 41 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/ZEmmpXv) |
| 42 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/VwVVKoL) |
| 43 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/GRwwgXo) |
| 44 | Randy | [Codepen](https://codepen.io/landy510/pen/poQQrKW?editors=1100) |
| 45 | Lara Chen | [Codepen](https://codepen.io/yuting-chen/pen/yLQQzax) |
| 46 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/jOQQaOR) |
| 47 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/ZEmmvGK) |
| 48 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/abQQLVb) |
| 49 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/jOQQdOa) |
| 50 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/OJaaGWJ)
| 51 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/zYMMVaN) |
| 52 | sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/QWJJeGN) |
| 53 | awei | [Codepen](https://codepen.io/hong-wei/pen/NWEeWVK) |
| 54 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/qBQLOwp) |
| 55 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/LYXXEmo) |
| 56 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/LYXMRpm) |
| 57 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/zYMyNQZ) |
| 58 | .icesam | [Codepen](https://codepen.io/icesam/pen/mdQaXPe) |
| 59 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/MWzZGqv) |
| 60 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/gOQdozm)|
| 61 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/GRwPGbE) |
| 62 | runweiting | [Codepen](https://codepen.io/weiting14/pen/mdQaGdz) |
| 63 | 墨莉 | [Codepen](https://codepen.io/hoku0306/pen/qBQgELM?editors=1000) |
| 64 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/ExOGMPa) |
| 65 | 阿賀＃3700 | [Codepen](https://codepen.io/sungho/pen/JjexKMR) |
| 66 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/JjexBGo) |
| 67 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/jOQdJeJ) |
| 68 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/jOQdjXJ) |
| 69 | andersonshen | [Codepen](https://codepen.io/Loonng/pen/poQYOLJ) |
| 70 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/poQBgJB) |
| 71 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/xxQejBr) |
| 72 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/QWJPBVr) |
| 72 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/GRwVRKe) |
|73|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/YzRmRBb)|
|74|SKey#9905|[Codepen](https://codepen.io/Dale-Chien/pen/gOQVVyR)|
| 75 | WA | [Codepen](https://codepen.io/ldddl/pen/LYMYxxz) |
| 76 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/GRPgZXE) |
| 77 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/MWZwVWZ) |
| 78 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/oNJbXeQ) |
| 79 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/Vwqeabq) |
| 80 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/eYXmVdE) |

---

- 快速複製格式：

```markdown!

| 0 | user | [Codepen]() |

```
