今天教大家學習如何製作網頁的下拉選單~
CSS 下拉選單
首先，我們要使用 CSS 建立一個滑鼠移動上去後顯示下拉選單的效果。
1.下拉選單樣式
（樣式一）
（樣式二）
2.基本下拉選單
當滑鼠移動到指定元素上時，會出現下拉選單。
（效果圖）
相關程式碼如下
Mouse over me
Hello World！
例項解析
HTML 部分：
我們可以使用任何的 HTML 元素來開啟下拉選單，如：， 或 a
使用容器元素 （如：
） 來建立下拉選單的內容，並放在任何你想放的位置上。
使用
元素來包裹這些元素，並使用 CSS 來設定下拉內容的樣式。
CSS 部分：
。dropdown 類使用 position：relative， 這將設定下拉選單的內容放置在下拉按鈕 （使用 position：absolute） 的右下角位置。
。dropdown-content 類中是實際的下拉選單。預設是隱藏的，在滑鼠移動到指定元素後會顯示。 注意 min-width 的值設定為 160px。你可以隨意修改它。
注意:
如果你想設定下拉內容與下拉按鈕的寬度一致，可設定 width 為 100% （ overflow：auto 設定可以在小尺寸螢幕上滾動）。
我們使用 box-shadow 屬性讓下拉選單看起來像一個
"卡片"
。
：hover 選擇器用於在使用者將滑鼠移動到下拉按鈕上時顯示下拉選單。
3.下拉選單
首先需要建立下拉選單，並允許使用者選取列表中的某一項。這個例項類似前面的例項，當我們在下拉列表中添加了連結，並設定了樣式：
（效果圖）
相關程式碼如下
小夥伴們有沒有學會呢？沒有學會記的私信小編“web”
相關推薦