---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day24 - 下拉選單

### 題目
今天要來實作設計稿中的下拉選單區塊：
<img src="https://hackmd.io/_uploads/H1sUy8Orh.png" width="200">
> - 點選下拉按鈕時會出現下拉選單，選單有 [box-shadow](https://developer.mozilla.org/zh-TW/docs/Web/CSS/box-shadow) 陰影效果，
> 並與按鈕右邊界貼齊（可以使用 position 定位）
> - 下拉選單內選項有 hover 效果
> - 點選選項時，選單收合，文字調整為點選選項時文字
> - 運用 jQuery 或是 JavaScript 製作
>
> 呈現示意：
>
> <img src="https://hackmd.io/_uploads/S15bbwOS3.gif" width="200">

可以利用此 [模板](https://codepen.io/hexschool/pen/oNaJZWZ) 修改 CSS 和 JS（使用 jQuery）`...` 的部分練習，
也可以嘗試自己從頭開始練習製作。

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

參考解答：
（使用 jQuery）
https://codepen.io/hexschool/pen/zYmyNaX

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/XWxwaaB) |
| 2 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/oNaReor) |
| 3 | Billy_Ti#9716 | [Codepen](https://codepen.io/Ti-Show/pen/GRYavbN?editors=0110) |
| 4 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/XWxwerG) |
| 5 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/qBJGPNd) |
| 6 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/NWOVvgd) |
7|雲漢#5319|[codepen](https://codepen.io/keon981/pen/poxmWgx?editors=1111)
| ８| Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/GRYaMjE) |
| 9| 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/KKGLXOO) |
| 10| Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/OJBYxzv) |
| 11| henrykgb#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/dygEzVB)|
|12|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/poxmdNJ)|
|13| Jacky7035#9423 |[Codepen](https://codepen.io/adens123/pen/WNaBXRV)|
|14|Quantum#6093|[Codepen](https://codepen.io/Min-Hao-Hung/pen/dygEZVe)|
|15|peihsuan#6315|[Codepen](https://codepen.io/peihsuanlai/pen/MWPdEmx)|
|16|K（アギルダー）#0386|[Codepen](https://codepen.io/klay376014/pen/VwEOywg)|
| 17 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/mdzYpeN) |
| 18 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/LYgozvy) |
| 19 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/YzJbYQm) |
| 20 | Hao#2485 | [Codepen](https://codepen.io/Seanfeb16/pen/XWxwZVr) |
| 21 | townyuan#2653 | [Codepen](https://codepen.io/townyuan/pen/yLRWvMG) |
| 22 | gahwa#3562 | [Codepen](https://codepen.io/gahwa17/pen/jOeoZme) |
| 23 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/yLRWvxW) |
| 24 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/VwEOdOz) |
| 25 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/mdzYKVR) |
| 26| wiimax#4564| [Codepen](https://codepen.io/willismax/pen/poxmZMR)
| 27 | 吳偉雄恩#2256 | [Codepen](https://codepen.io/Bamboo1212/pen/QWZRVZq) |
| 28 |Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/PoyvyGK) |
| 29 |N0c7iluc3n7#4390 | [Codepen](https://codepen.io/huang-yu-cheng/pen/abRrRrZ) |
| 30 | David0799#4415 | [Codepen](https://codepen.io/David0799/pen/MWPdzba?editors=0010) |
|31|Yvonne#2721|[Codepen](https://codepen.io/Evonne/pen/JjmqmoP?editors=1111)
| 32 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/poxmQQb)|
| 33 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/Rwemxda)|
| 34 | 浪裡小白龍#6860 | [Codepen](https://codepen.io/Emillo/pen/xxyNmKj)|
| 35 | Rayo#8002 | [Codepen](https://codepen.io/loborayo/pen/QWZRYrZ)|
| 36 | 冬天#5215 | [Codepen](https://codepen.io/winter_/pen/XWxLrmG)|
| 37 | 鄭舜仁#6606 | [Codepen](https://codepen.io/randomno/pen/LYgKYjO)|
| 38 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/zYmVxoW?editors=0111)|
| 39 | judy123#2363 | [Codepen](https://codepen.io/hsuantsong/pen/WNaqbaO)|
|40|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/VwEJLqp)
| 41 | k.sin#3115|[CodePen](https://codepen.io/sin588/pen/MWPdvzX)
| 42 | Ataraxia#9977 |[CodePen](https://codepen.io/ataraxia8888/pen/abRwXvX)
| 43 | FiReBrO#0557 |[CodePen](https://codepen.io/firebro42/pen/qBJzbKv)
| 44 | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/jOejWGB) |
| 45 | yoyo#1003 | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/poxXjrv) |
| 46 | 姜承#8204 | [CodePen](https://codepen.io/Troy0718/pen/bGmPNQq) |
| 47 | SKey#9905 | [CodePen](https://codepen.io/Dale-Chien/pen/YzJoLZg) |
| 48 | Celai#1715| [CodePen](https://codepen.io/drdrvpgf-the-bashful/pen/PoyMBXy) |
| 49 | HsuanTang#1349 | [CodePen](https://codepen.io/HsuanTang/pen/jOegdML) |
| 49 | Janet#5784 | [CodePen](https://codepen.io/janetlinnn/pen/OJaLPQK) |
| 50 | 小魚#8614 | [CodePen](https://codepen.io/gizelliang/pen/BaGBdgy) |
| 51 | 兔子#6746 | [CodePen](https://codepen.io/CarrotDetector/pen/qBQBPay) |
| 52 | 肉個阿倫#7172 | [CodePen](https://codepen.io/i9574385/pen/bGQdpWX) |
| 53 | weiting#3489 | [CodePen](https://codepen.io/weiting14/pen/oNQXRje) |
| 54 | CMLB0212|[Codepen](https://codepen.io/Chungmin0212/pen/abQZoyb)|
| 55 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/poQbJzV?editors=1011)|
| 56 | PoWei#8484 |[Codepen](https://codepen.io/harrison-wei-lai/pen/yLQvxjJ)|
| 57 | betty#0693 |[Codepen](https://codepen.io/betty-hu/pen/YzRONwJ?editors=1010)|
| 58 | 小明#4408 |[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/YzRjvRj)|