教你玩轉CSS 下拉選單-有解無憂

使用 CSS 創建一個滑鼠移動上去后顯示下拉選單的效果，

1.基本下拉選單

當滑鼠移動到指定元素上時，會出現下拉選單，

代碼演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水香木魚的博客</title>

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

<body>

    <div class="dropdown">
        <span>Mouse over me</span>
        <div class="dropdown-content">
            <p>Hello World!</p>
        </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 選擇器用于在用戶將滑鼠移動到下拉按鈕上時顯示下拉選單，

2.下拉選單

代碼演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水香木魚的博客</title>

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

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

</html>

效果演示：

3.下拉內容對齊方式

float:left;

float:right;

如果你想設定右浮動的下拉選單內容方向是從右到左，而不是從左到右，可以添加以下代碼 right: 0;

    .dropdown-content {
        right: 0;
    }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/261687.html

標籤：其他

上一篇：元素水平垂直居中的四種方法

下一篇：2048小游戲(JavaScript版) (2) 構建游戲界面