CSS學習筆記下拉列表

>
>
>
prcorangetitle
>
charset
="utf-8"
>
>
.dropdown
.dropdown-content
.dropdown:hover .dropdown-content
style
>
head
>
>
>
滑鼠移動後出現下拉列表h2
>
>
將滑鼠移動到指定元素上就能看到下拉列表。p
>
class
="dropdown"
>
>
滑鼠移動到我這！span
>
class
="dropdown-content"
>
>
w3cschool教程p
>
>
www.w3cschool.cnp
>
div>
div>
body
>
html
>

.dropdown 類使用 position:relative, 這將設定下拉列表的內容放置在下拉按鈕 (使用 position:absolute) 的右下角位置。.dropdown-content 類中是實際的下拉列表。預設是隱藏的，在滑鼠移動到指定元素後會顯示。注意 min-width 的值設定為 160px。你可以隨意修改它。注意: 如果你想設定下拉內容與下拉按鈕的寬度一致，可設定 width 為 100%( overflow:auto 設定可以在小尺寸螢幕上滾動)。我們使用 box-shadow 屬性讓下拉列表看起來像乙個"卡片"。:hover 選擇器用於在使用者將滑鼠移動到下拉按鈕上時顯示下拉列表。

>
>
>
prcorangetitle
>
charset
="utf-8"
>
>
.dropbtn
.dropdown
.dropdown-content
.dropdown-content a
.dropdown-content a:hover
.dropdown:hover .dropdown-content
.dropdown:hover .dropbtn
style
>
head
>
>
>
下拉列表h2
>
>
滑鼠移動到按鈕上開啟下拉列表。p
>
class
="dropdown"
>
class
="dropbtn"
>
下拉列表button
>
class
="dropdown-content"
>
href
="">
w3cschool教程 1a
>
href
="">
w3cschool教程 2a
>
href
="">
w3cschool教程 3a
>
div>
div>
body
>
html
>

>
>
>
prcorangetitle
>
charset
="utf-8"
>
>
ulli
li a, .dropbtn
li a:hover, .dropdown:hover .dropbtn
.dropdown
.dropdown-content
.dropdown-content a
.dropdown-content a:hover
.dropdown:hover .dropdown-content
style
>
head
>
>
>
>
class
="active"
href
="#home"
>
主頁a>
li>
>
href
="#news"
>
新聞a>
li>
class
="dropdown"
>
href
="#"
class
="dropbtn"
>
下拉列表a
>
class
="dropdown-content"
>
href
="#"
>
鏈結 1a
>
href
="#"
>
鏈結 2a
>
href
="#"
>
鏈結 3a
>
div>
div>
ul>
>
導航欄上的下拉列表h3
>
>
滑鼠移動到 "下拉列表" 鏈結先顯示下拉列表。p
>
body
>
html
>

CSS學習筆記下拉列表

Bootstrap學習筆記下拉列表

工作筆記下拉列表部分

CSS下拉列表

CSS學習筆記 下拉列表

Bootstrap學習筆記 下拉列表

工作筆記 下拉列表部分

CSS下拉列表

相關推薦

CSS學習筆記下拉列表

Bootstrap學習筆記下拉列表

工作筆記下拉列表部分