貓城
BLACKCAT CASTLE

下拉式選單 CSS│游標經過自動展開收合效果

   34 VIEWS
下拉式選單 CSS│游標經過自動展開收合效果

歡迎來到黑貓城,我是時雨の町站長 ─ 時雨。

下拉式選單│游標經過自動展開收合效果

說明

<nav> 是表示用來規劃網頁的導覽區域,也就是網頁選單(Menu)。在 <nav> 中一般是 <ul> 跟 <li> 的組合。如下:

<nav>
    <ul>
        <li>
        </li>
    </ul>
</nav>

topicsubcata 是自定義名稱,可以自己改其他名稱,如果修改名稱要把 CSS 中的相關名稱一起變更。

topic 是主層(第一層),sub 是子層整個區塊(第二層~第N層),也就游標經過時會出現的整個部分,cata 是子層中的各層。

:first-child 是 CSS 中的偽類別,代表親元素中的第一個子元素。margin-top設為 0 可以讓子層緊貼著主層。

:nth-child(n) 是 CSS 中的偽類選取器,後面的 n 是自訂,可以是數字也可以是關鍵字元,如「odd」或「even」,方便快速定義表格或選單中的每一格。

:nth-child(odd) 意思是指定單數列,:nth-child(even)則是指定偶數列。使用數字如:nth-child(1)則代表指定第一格。

:hover表示當游標經過時要給予的動作。



時雨 時雨,時雨の町-日文學習園地站長,為了紀錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站知識與相關的網頁程式語言,如果你喜歡我的文章,請幫我按讚哦(*´ω`*)。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS