CSS下拉列表

例子：

下拉列表

選單內容 1

選單內容 2

選單內容 3

html 部分：

製作下拉列表可以使用任何的 html元素來開啟下拉列表，如：, 或 元素。

使用容器元素 (如： ) 來建立下拉列表的內容，並放在任何你想放的位置上。

使用 元素來包裹這些元素，並使用 css 來設定下拉內容的樣式。

css 部分：

.dropdown 類使用position:relative, 這將設定下拉列表的內容放置在下拉按鈕 (使用position:absolute) 的右下角位置。

.dropdown-content類中是實際的下拉列表。預設是隱藏的，在滑鼠移動到指定元素後會顯示。注： 如果你想設定下拉內容與下拉按鈕的寬度一致，可設定width為 100% 。

使用box-shadow屬性讓下拉列表看起來像乙個"卡片"，更有立體感。

:hover選擇器用於在使用者將滑鼠移動到下拉按鈕上時顯示下拉列表。

1

4849
50下拉列表
5152
選單內容 1
53選單內容 2
54選單內容 3
5556

還可以將下拉內容設定為，起到乙個類似於放大的效果。

1

2425
2627
28移動滑鼠到上顯示下拉內容。
2930
313233
34新增描述
3536

效果圖：

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 下拉列表

使用 css 建立乙個滑鼠移動上去後顯示下拉列表的效果。當滑鼠移動到指定元素上時，會出現下拉列表。dropdown dropdown content.dropdown hover.dropdown content style mycode3 mycode3type html 滑鼠移動到我這！span...

CSS的下拉列表

在css裝飾html的網頁過程中，即使是最基礎的網頁，下拉列表也是必要的網頁元件。接下來讓我們看一下下拉列表的分析 html 部分 我們可以使用任何的 html 元素來開啟下拉列表，如 或 a 元素。使用容器元素 如 來建立下拉列表的內容，並放在任何你想放的位置上。使用 元素來包裹這些元素，並使用 ...