今天教大家學習如何制作網頁的下拉菜單~

css 下拉菜單

首先，我們要使用 CSS 創建一個鼠标移動上去後顯示下拉菜單的效果。

1.下拉菜單樣式

（樣式一）

（樣式二）

2.基本下拉菜單

當鼠标移動到指定元素上時，會出現下拉菜單。

（效果圖）

相關代碼如下

<style>

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

z-index: 1;

}

.dropdown:hover .dropdown-content {

display: block;

}

</style>

<div class="dropdown">

<span>Mouse over me</span>

<div class="dropdown-content">

<p>Hello World!</p>

</div>

</div>

實例解析

HTML 部分：

我們可以使用任何的 HTML 元素來打開下拉菜單，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 來創建下拉菜單的内容，并放在任何你想放的位置上。

使用 <div> 元素來包裹這些元素，并使用 CSS 來設置下拉内容的樣式。

CSS 部分：

.dropdown 類使用 position:relative, 這将設置下拉菜單的内容放置在下拉按鈕 (使用 position:absolute) 的右下角位置。

.dropdown-content 類中是實際的下拉菜單。默認是隐藏的，在鼠标移動到指定元素後會顯示。 注意 min-width 的值設置為 160px。你可以随意修改它。

注意: 如果你想設置下拉内容與下拉按鈕的寬度一緻，可設置 width 為 100% ( overflow:auto 設置可以在小尺寸屏幕上滾動)。

我們使用 box-shadow 屬性讓下拉菜單看起來像一個"卡片"。

:hover 選擇器用于在用戶将鼠标移動到下拉按鈕上時顯示下拉菜單。

3.下拉菜單

首先需要創建下拉菜單，并允許用戶選取列表中的某一項。這個實例類似前面的實例，當我們在下拉列表中添加了鍊接，并設置了樣式：

（效果圖）

相關代碼如下

<style>

/* 下拉按鈕樣式 */

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

/* 容器 <div> - 需要定位下拉内容 */

.dropdown {

position: relative;

display: inline-block;

}

/* 下拉内容 (默認隐藏) */

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

/* 下拉菜單的鍊接 */

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

/* 鼠标移上去後修改下拉菜單鍊接顔色 */

.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠标移上去後顯示下拉菜單 */

.dropdown:hover .dropdown-content {

display: block;

}

/* 當下拉内容顯示後修改下拉按鈕的背景顔色 */

.dropdown:hover .dropbtn {

background-color: #3e8e41;

}

</style>

<div class="dropdown">

<button class="dropbtn">下拉菜單</button>

<div class="dropdown-content">

<a href="#">百度 1</a>

<a href="#">百度 2</a>

<a href="#">百度 3</a>

</div>

</div>

小夥伴們有沒有學會呢？沒有學會記的私信小編"web"

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!