當滑鼠移動到指定元素上時，會出現下拉列表。
下拉列表例項title>
charset="utf-8">
.dropdown
.dropdown-content
.dropdown
:hover
.dropdown-content
style>
head>
滑鼠移動後出現下拉列表h2>
將滑鼠移動到指定元素上就能看到下拉列表。p>
class="dropdown">
滑鼠移動到我這！span>
class="dropdown-content">
嘻嘻哈哈p>
html>
html 部分：
我們可以使用任何的 htm，元素來開啟下拉列表，如：, 或 a元素。
使用容器元素 (如：) 來建立下拉列表的內容，並放在任何你想放的位置上。
使用元素來包裹這些元素，並使用 css 來設定下拉內容的樣式。
css 部分：
.dropdown 類使用 position:relative, 這將設定下拉列表的內容放置在下拉按鈕 (使用 position:absolute) 的右下角位置。
.dropdown-content 類中是實際的下拉列表。預設是隱藏的，在滑鼠移動到指定元素後會顯示。 注意 min-width 的值設定為 160px。你可以隨意修改它。 注意: 如果你想設定下拉內容與下拉按鈕的寬頻一致，可設定 width 為 100% ( overflow:auto 設定可以在小尺寸螢幕上滾動)。
我們使用 box-shadow 屬性讓下拉列表看起來像乙個」卡片」。
:hover 選擇器用於在使用者將滑鼠移動到下拉按鈕上時顯示下拉列表。
下拉列表例項title>
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="">嘻嘻哈哈 1a>
href="">嘻嘻哈哈 2a>
href="">嘻嘻哈哈 3a>
div>
div>
body>
html>
float:right;
下拉列表例項title>
charset="utf-8">
.dropbtn
.dropdown
.dropdown-content
.dropdown-content
a.dropdown-content
a:hover
.dropdown
:hover
.dropdown-content
.dropdown
:hover
.dropbtn
style>
head>
下拉內容的對齊方式h2>
left 和 right 屬性指定了下拉內容是從左到右或從右到左。p>
class="dropdown"
style="float:left;">
class="dropbtn">左button>
class="dropdown-content"
style="left:0;">
href="#">嘻嘻哈哈 1a>
href="#">嘻嘻哈哈 2a>
href="#">嘻嘻哈哈 3a>
div>
div>
class="dropdown"
style="float:right;">
class="dropbtn">右button>
class="dropdown-content">
href="#">嘻嘻哈哈 1a>
href="#">嘻嘻哈哈 2a>
href="#">嘻嘻哈哈 3a>
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...