各位帥哥美女午安，歡迎來到 coding 小白盜版學校官網日記ㄉ第11天～

這個計畫的內容是我這個coding超新手會在30裡，把複刻學校官網當作目標，從最基礎的前端html、css、js...開始邊做邊學，紀錄每天的學習進度，看看一個月過去能學到什麼程度。

今天天氣真好，雖然風依舊超大，但氣溫又變回炎炎夏日ㄌ。今天的盜版目標是...

下拉式選單!!

我們的目標是要當游標懸浮在nav關於北教大的時候，網頁會自動展開下面一大串：歷任校長、北教大簡介...的列表，我記得老師的講義有寫，拿出來照著做好了

字好多，有點太深奧了，還是問chatgp學長好了

我把我的html貼給它，請它教我如何為"關於北教大"製作下拉式選單，
選單內包含歷任校長、北教大簡介、學校願景。他回答：

好的 ✅ 我幫你把「關於北教大」做成下拉式選單，裡面有三個子選項：歷任校長、北教大簡介、學校願景。
以下是完整範例（HTML + CSS），你可以直接套用：



…
挖，字還是好多，只好認命讀了

解讀完整理出重點大概的意思是

1. 在nav裡找到希望長出下拉選單的 關於北教大 ：

<ul>
   <li>關於北教大</li>
   <li>...</li>
   <li>...</li>
</ul>

裡面再塞一組 ...，變成這樣：

<ul>
   <li>關於北教大
      <ul>
         <li><a href="#">歷任校長</a></li>
         <li><a href="#">北教大簡介</a></li>
         <li><a href="#">學校願景</a></li>
      </ul>
   </li>
   <li>...</li>
   <li>...</li>
</ul>

2. 幫他建立 css 的 class，我習慣建兩個，一個設定背景格式、一個設定字型
   ✩特別記筆記，新朋友 position: absolute 可以讓這串下拉式選單疊在既有的內容上，不會把原本寫好的東西擠下去

.nav-drop{
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: #000000;
    margin-top: 1em;
    margin-left: -1.4rem;
}
.font13 a{
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: 4%;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    padding: 0.8rem 1.4rem;
    margin: 0 0.5rem;

3. 因為只有游標碰到”關於北教大”下拉式選單才能出現，所以我們現在要微微修改 .nav-drop，把 display: flex;和 flex-direction: column;剪下來，替換成 display:none;，讓它平常隱身

.nav-drop{
    display: none;
    position: absolute;
    background-color: #000000;
    margin-top: 1em;
    margin-left: -1.4rem;

然後在下面加一段新的 class 樣式 .drop-down:hover .nav-drop{...}，把剛剛剪下的 display: flex;和 flex-direction: column; 貼進去，講講下拉式列表甚麼時候應該現身

.drop-down:hover .nav-drop{
    display: flex;
    flex-direction: column;
}

4. 最後最後，把這些 class 加進 html 正確的地方

<li class="drop-down font02">關於北教大
   <ul class="nav-drop font13" type="none">
      <li><a href="#">歷任校長</a></li>
      <li><a href="#">北教大簡介</a></li>
      <li><a href="#">學校願景</a></li>
   </ul>
</li>

完成！！！

(偷偷加ㄍ昨天學的視覺回饋，游標碰到字會變橘色)

以上就是今天的進度，真是充實的一天...蛤你說很少？
但我打到好累了，不管我現在就要收工，各位明天見('ω'✌︎ )