CSS 下拉菜单

基本下拉列表

创建一个下拉框，当用户将鼠标移到元素上时会出现该下拉框。

<!DOCTYPE html>
                        <html>
                        <head>
                        <meta charset="utf-8">
                          <title>蝴蝶教程（jc2182.com）</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>

                        <h2>悬停下拉</h2>
                        <p>将鼠标移到下面的文本上以打开下拉菜单内容。</p>

                        <div class="dropdown">
                          <span>鼠标悬停在我这里</span>
                          <div class="dropdown-content">
                          <p>Hello World!</p>
                          </div>
                        </div>

                        </body>
                        </html>

尝试一下

示例说明：

HTML使用任何元素打开下拉内容，例如<span>或<button>元素。使用容器元素（如<div>）创建下拉内容并在其中添加任何内容。在元素周围包裹<div>元素，以使用CSS正确定位下拉内容。
CSS）的.dropdown类使用position:relative，当我们要下拉的内容要放在正下方的下拉按钮（使用这是需要position:absolute）。.dropdown-content类保存实际下拉内容。它默认是隐藏的，并将在悬停时显示（见下文）。请注意，min-width它设置为160px。随意改变这一点。提示：如果您希望下拉内容的宽度与下拉按钮一样宽，请将其设置width为100％（并用overflow:auto在小屏幕上启用滚动）。我们使用CSS box-shadow属性使下拉菜单看起来像“卡片” ，而不是使用边框。:hover选择器被用来显示在下拉菜单中，当用户在该下拉按钮移动鼠标。

下拉式菜单

创建一个下拉菜单，允许用户从列表中选择一个选项：

<!DOCTYPE html>
                        <html>
                        <head>
                        <meta charset="utf-8">
                          <title>蝴蝶教程（jc2182.com）</title>
                        <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);
                          z-index: 1;
                        }

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

                        <h2>下拉菜单</h2>
                        <p>将鼠标移到按钮上以打开下拉菜单。</p>

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

                        <p><strong>注意:</strong> 我们使用href="#"作为测试链接。在真实的web站点中，这是url。</p>

                        </body>
                        </html>

尝试一下

基本下拉列表

下拉式菜单

相关页面