css--下拉菜單

時間 2019-12-05

標籤 css 下拉菜單欄目 CSS 简体版

原文原文鏈接

1、下拉菜單

一、示例

代碼以下html

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>下拉菜單</title>
<style>
.dropbtn {spa

background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;

}code

.dropdown {htm

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);

}utf-8

.dropdown-content a {pdo

color: black;
padding: 12px 16px;
text-decoration: none;
display: block;

}it

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

.dropdown:hover .dropdown-content {

display: block;

}

.dropdown:hover .dropbtn {

background-color: #3e8e41;

}

</style>
<body>

<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>


</div>

</body>

</html>

運行結果

總結：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 選擇器用於在用戶將鼠標移動到下拉按鈕上時顯示下拉菜單。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。