# 🏅 Day 46 - Bootstrap Dropdown

## Bootstrap Dropdown 介紹

[Dropdown](https://getbootstrap.com/docs/5.3/components/dropdowns/) 下拉選單是當點擊按鈕時，會在指定位置出現一個列表。

這個列表出現的方式與前幾周常用的 modal 元件不大相同，此元件是使用絕對定位的方式去產生下方的列表，步驟如下：

1. 初始狀態下方列表為隱藏( display: none; )
2. 點擊按鈕後下方列表會呈現
3. 再點擊一次按鈕或界外(可參考 Auto close behavior 能將界外之設定關閉)將列表關閉

Dropdown 本身只支援簡單的下拉式架構，所以若想要在內層增加巢狀結構(點擊內按鈕會開啟新的下拉式選單)是無法單純實現的，需要透過 JS 相關的語法達到多內層之巢狀結構。

## 作業介紹

實現下圖之下拉式選單效果，當點擊 navbar 之探索時會出現下方下拉式選單


LV 1 依據此[模板](https://codepen.io/jmimiding4104/pen/PorQmQJ) 並參考 [文件](https://getbootstrap.com/docs/5.3/components/dropdowns/) 補充 *** 處，將下拉式列表產出，但右側之延伸可不需執行或固定模板亦可。

LV 2 延續上述模板稍做修改，並增加 jQuery 或 JS 語法將巢狀結構實踐。
>因應右側需增加元素，開啟之選單範圍須使用 div 等容器包裝並隨之修改 CSS 之設定，另外在程式語言動態修改狀態時，也需要加入 CSS 語法幫助實現渲染效果。

## 回報流程

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


<!-- 解答：

LV1：
https://codepen.io/jmimiding4104/pen/VwJQmae

LV2(jQuery)：
https://codepen.io/jmimiding4104/pen/RwzQoXj

-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/gONKamR) |
| 02 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/dyBKGdm) |
| 03 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/wvLEJXE) |
| 04 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/rNEKpzL?editors=1010) |
|05|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/VwJdmKR)|
|06|Kaya|[Codepen](https://codepen.io/kayaribi/pen/KKjeeJX?editors=1000)|
| 07 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/XWLBJdb) |
| 08 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/rNErOyo) |
| 08 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/rNErdjq) |
| 09 | kawa | [Codepen](https://codepen.io/z83xji6/pen/yLdqKwQ) |
| 10 | wind | [Codepen](https://codepen.io/wind7y/pen/gONjZqd) |
| 11 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/vYqzWrN) |
| 12 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/NWZLXrM) |
| 13 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/zYVMKYm) |
| 14 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/ZEdmJmw?editors=1010)|
| 15 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/vYqbdVm)|
| 16 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/poXBMag) |
| 17 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/eYwqKgd) |
| 18 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/OJKPMNN) |
| 19 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/ByaErXE?editors=1000) |

<!--
| No | Discord | [Codepen]() |
-->