CSS 下拉菜单

  • 基本下拉列表

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

    <!DOCTYPE html>
                            <html>
                            <head>
                            <meta charset="utf-8">
                              <title>菜鸟教程(cainiaoya.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>菜鸟教程(cainiaoya.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>
    尝试一下
  • 相关页面

    HTML教程:HTML样式