使用 css 建立乙個滑鼠移動上去後顯示下拉列表的效果。
當滑鼠移動到指定元素上時，會出現下拉列表。
.dropdown
.dropdown-content.
dropdown:hover.dropdown-content
style>
[mycode3]
[mycode3type="html"]
滑鼠移動到我這！span>
菜鳥教程p>
www.runoob.comp>
div>
div>
html 部分：
我們可以使用任何的 html 元素來開啟下拉列表，如：, 或 a 元素。
使用容器元素 (如： ) 來建立下拉列表的內容，並放在任何你想放的位置上。
使用 元素來包裹這些元素，並使用 css 來設定下拉內容的樣式。
css 部分：
.dropdown類使用position:relative, 這將設定下拉列表的內容放置在下拉按鈕 (使用position:absolute) 的右下角位置。
.dropdown-content類中是實際的下拉列表。預設是隱藏的，在滑鼠移動到指定元素後會顯示。 注意min-width的值設定為 160px。你可以隨意修改它。注意:如果你想設定下拉內容與下拉按鈕的寬度一致，可設定width為 100% (overflow:auto設定可以在小尺寸螢幕上滾動)。
我們使用box-shadow屬性讓下拉列表看起來像乙個"卡片"。
:hover選擇器用於在使用者將滑鼠移動到下拉按鈕上時顯示下拉列表。
建立下拉列表，並允許使用者選取列表中的某一項：
下拉列表
下拉列表
菜鳥教程 1
菜鳥教程 2
菜鳥教程 3
左右如果你想設定右浮動的下拉列表內容方向是從右到左，而不是從左到右，可以新增以下**right: 0;
.dropdown-content
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裝飾html的網頁過程中，即使是最基礎的網頁，下拉列表也是必要的網頁元件。接下來讓我們看一下下拉列表的分析 html 部分 我們可以使用任何的 html 元素來開啟下拉列表，如 或 a 元素。使用容器元素 如 來建立下拉列表的內容，並放在任何你想放的位置上。使用 元素來包裹這些元素，並使用 ...