纯CSS写出下拉菜单

网页的下拉菜单是，当鼠标移入到指定元素上时i，会出现下拉菜单。

dropdown 是 dropdown-content的父元素。

 <div class="dropdown">
  <span>鼠标移动到我这！</span>
      <div class="dropdown-content">
       <p>我会显示出来</p>
      </div>
</div>

指定样式：

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

给鼠标移入的元素开启定位（相对定位）

.dropdown-content {
  display: none;                                //暂时隐藏下拉菜单的内容
  position: absolute;                         //等级比相对定位高，显示时可覆盖
  background-color: #f9f9f9;
  min-width: 160px;                           //意义是最小也不能小到160px的宽度
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);//下拉菜单的阴影修饰
  padding: 12px 16px;
}


.dropdown:hover .dropdown-content {            / /  hover时的下拉内容
  display: block;                                         //hover时显示content
}

实现下拉列表。