在css裝飾html的網頁過程中，即使是最基礎的網頁，下拉列表也是必要的網頁元件。接下來讓我們看一下下拉列表的分析：
html 部分：
我們可以使用任何的 html 元素來開啟下拉列表，如：, 或 a 元素。
使用容器元素 (如： ) 來建立下拉列表的內容，並放在任何你想放的位置上。
使用 元素來包裹這些元素，並使用 css 來設定下拉內容的樣式。
css 部分：
.dropdown類使用position:relative, 這將設定下拉列表的內容放置在下拉按鈕 (使用position:absolute) 的右下角位置。
.dropdown-content類中是實際的下拉列表。預設是隱藏的，在滑鼠移動到指定元素後會顯示。 注意min-width的值設定為 160px。你可以隨意修改它。注意:如果你想設定下拉內容與下拉按鈕的寬度一致，可設定width為 100% (overflow:auto設定可以在小尺寸螢幕上滾動)。
我們使用box-shadow屬性讓下拉列表看起來像乙個"卡片"。
:hover選擇器用於在使用者將滑鼠移動到下拉按鈕上時顯示下拉列表。
doctype html
>
<
html
>
<
head
>
<
title
>下拉列表(runoob.com)
title
>
<
meta
charset
="utf-8"
>
<
style
>
.dropbtn
.dropdown
.dropdown-content
.dropdown-content a
.dropdown-content a:hover
.dropdown:hover .dropdown-content
.dropdown:hover .dropbtn
style
>
head
>
<
body
>
<
h2>下拉列表
h2>
<
p>滑鼠移動到按鈕上開啟下拉列表。
p>
<
div
class
="dropdown"
>
<
button
class
="dropbtn"
>下拉列表
button
>
<
div
class
="dropdown-content"
>
<
a href
="">下
a>
<
a href
="">拉
a>
<
a href
="">菜
a>
<
a href
="">單
a>
div>
div>
body
>
html
>
CSS下拉列表
谷歌效果圖 ie效果圖 凱明科技 div div class dropdown content a href 凱明科技資訊 1凱明科技資訊 1 a a href 凱明科技資訊 2 a a href 凱明科技資訊 3 a div div div class dropdown div class dro...
CSS下拉列表
例子 下拉列表 選單內容 1 選單內容 2 選單內容 3 html 部分 製作下拉列表可以使用任何的 html元素來開啟下拉列表，如 或 元素。使用容器元素 如 來建立下拉列表的內容，並放在任何你想放的位置上。使用 元素來包裹這些元素，並使用 css 來設定下拉內容的樣式。css 部分 dropdo...
CSS 下拉列表
使用 css 建立乙個滑鼠移動上去後顯示下拉列表的效果。當滑鼠移動到指定元素上時，會出現下拉列表。dropdown dropdown content.dropdown hover.dropdown content style mycode3 mycode3type html 滑鼠移動到我這！span...