比较基础的下拉案例

在下述案例中，当用户的鼠标移动到元素上，下拉框则会显示出来。

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #eef8f8;
    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>

<div class="dropdown">
  <span>把鼠标移到这里试试呗~</span>
  <div class="dropdown-content">
    <p>永不加赋</p>
  </div>
</div>

运行一下

下拉菜单按钮

类似上一个案例，而不同的是下拉框中是一组菜单按钮。

<style>
.dropbtn {
    background-color: #46acb6;
    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: #eef8f8;
    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: #46acb6;
}

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

.dropdown:hover .dropbtn {
    background-color: #2c7177;
}
</style>

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

运行一下

右对齐的下拉按钮

如果该下拉菜单按钮是在右侧，则往往需要如下修改以保证下拉菜单和按钮右对齐。

.dropdown-content {
    right: 0;
}

运行一下

下拉显示图片

把鼠标悬浮在下方的缩略图上，则会下拉显示含有大图片的下拉框。

<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);
    z-index: 1;
}

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

.desc {
    padding: 15px;
    text-align: center;
}
</style>

<div class="dropdown">
  <img src="https://logo.zhuanfou.com/draw_by_jerkz.jpg" alt="draw_by_jerkz" width="100">
  <div class="dropdown-content">
    <img src="https://logo.zhuanfou.com/draw_by_jerkz.jpg" alt="draw_by_jerkz" width="300">
    <div class="desc">Draw by JerkZ</div>
  </div>
</div>

运行一下

在导航条中添加下拉菜单按钮

下拉菜单按钮经常被应用在导航条中，从而更直观地展示网站的层次与逻辑，也方便了用户的快捷访问。

• 首页
• 新闻
• 游戏
  吃鸡吃鸭吃鹅

<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: #46acb6;
}

li.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);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

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

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">游戏</a>
    <div class="dropdown-content">
      <a href="#">吃鸡</a>
      <a href="#">吃鸭</a>
      <a href="#">吃鹅</a>
    </div>
  </li>
</ul>

运行一下