CSS Dropdown 下拉菜单

前言

  • 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

1、下拉菜单

  • 当鼠标移动到指定元素上时,会出现下拉菜单。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <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;
    }

    .dropdown:hover .dropdown-content {
    display: block;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <h1>鼠标移动后出现下拉菜单</h1>
    <p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

    <div class="dropdown">
    <span>鼠标移动到我这!</span>

    <div class="dropdown-content">
    <p>Qian Chia 工作室</p>
    <p>www.qianchia.com</p>
    </div>
    </div>
  • 效果

  • 解析

    • HTML 部分:

      • 我们可以使用任何的 HTML 元素来打开下拉菜单,如:<span>, 或 <button> 元素。

      • 使用容器元素 (如:<div>) 来创建下拉菜单的内容,并放在任何你想放的位置上。

      • 使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。

    • CSS 部分:

      • .dropdown 类使用 position: relative;, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position: absolute;) 的右下角位置。

      • .dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。可以随意修改它。注意: 如果想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100% (overflow: auto; 设置可以在小尺寸屏幕上滚动)。

      • 使用 box-shadow 属性让下拉菜单看起来像一个 “卡片”。

      • :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

1.1 创建下拉菜单

  • 创建下拉菜单,并允许用户选取列表中的某一项。

  • 这个实例类似前面的实例,但是在下拉列表中添加了链接,并设置了样式。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <style>
    .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    }

    .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>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <h2>下拉菜单</h2>
    <p>鼠标移动到按钮上打开下拉菜单。</p>

    <div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content">
    <a href="https://blog.qianchia.com">博客</a>
    <a href="https://mp.qianchia.com">小程序</a>
    <a href="https://www.qianchia.com/tools/tools.html">工具</a>
    </div>
    </div>
  • 效果

    下拉菜单


    鼠标移动到按钮上打开下拉菜单。

2、下拉内容对齐方式

  • 如果想设置右浮动的下拉菜单内容方向是从右到左,而不是从左到右,可以添加代码 right: 0;

  • 一般 left 和 right 在一个样式中只能使用一次,同时使用会出现兼容问题,当浏览器解释代码的时候发现 left 和 right 同时存在时,就会放弃解释 right。放弃解释后优先级就排不上用场了,即使优先级最高的 !important 也不会作用。这就好比战场上有两个士兵 A 和 B,B 被打死了,那么即使医疗兵医术再高也救不了他了。所以 left 优先级高于 right。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <style>
    .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    }

    .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>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <h2>下拉内容的对齐方式</h2>
    <p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>

    <div class="dropdown" style="float: left;"> <!-- float: left; -->
    <button class="dropbtn"></button>
    <div class="dropdown-content" style="left: 0;"> <!-- left: 0; -->
    <a href="https://blog.qianchia.com">博客</a>
    <a href="https://mp.qianchia.com">小程序</a>
    <a href="https://www.qianchia.com/tools/tools.html">工具</a>
    </div>
    </div>

    <div class="dropdown" style="float: right;"> <!-- float: right; -->
    <button class="dropbtn"></button>
    <div class="dropdown-content" style="right: 0;"> <!-- right: 0; -->
    <a href="https://blog.qianchia.com">博客</a>
    <a href="https://mp.qianchia.com">小程序</a>
    <a href="https://www.qianchia.com/tools/tools.html">工具</a>
    </div>
    </div>
  • 效果

    下拉内容的对齐方式


    left 和 right 属性指定了下拉内容是从左到右或从右到左。

3、图片下拉

  • 在下拉菜单中添加图片。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <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);
    }

    .dropdown:hover .dropdown-content {
    display: block;
    }

    .image {
    text-align: center;
    padding-top: 10px;
    }

    .desc {
    padding: 15px;
    text-align: center;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <h2>下拉图片</h2>
    <p>移动鼠标到图片上显示下拉内容。</p>

    <div class="dropdown">
    <img src="https://demo.qianchia.com/media/image/demo9.png" width="100" height="100" />

    <div class="dropdown-content">
    <div class="image">
    <img src="https://demo.qianchia.com/media/image/demo9.png" width="20" height="20" />
    </div>
    <div class="desc">Qian Chia 工作室</div>
    </div>
    </div>
  • 效果

    下拉图片


    移动鼠标到图片上显示下拉内容。

4、导航栏下拉

  • 在导航条上添加下拉菜单。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

    li {
    float: left;
    }

    li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    li a:hover, .dropdown:hover, .dropbtn {
    background-color: #111;
    }

    .dropdown {
    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;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <ul>
    <li><a class="active" href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>

    <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
    <a href="#">链接 1</a>
    <a href="#">链接 2</a>
    <a href="#">链接 3</a>
    </div>
    </div>
    </ul>

    <h3>导航栏上的下拉菜单</h3>
    <p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>
  • 效果

      

文章目录
  1. 1. 前言
  2. 2. 1、下拉菜单
    1. 2.1. 1.1 创建下拉菜单
  3. 3. 2、下拉内容对齐方式
  4. 4. 3、图片下拉
  5. 5. 4、导航栏下拉
隐藏目录