css实现下拉菜单

作为前端小白，刚刚开始写下拉菜单的时候，经常会处于大概应该或许知道怎么做，但是实际操作的时候会感觉没有头绪。

在这里我就也按照自己的理解厘清步骤，记录下来。

1.创建下拉菜单的父容器，该父容器是一个完整的下拉菜单的整体框架。如果同一行有两个下拉菜单那就平行创建两个父容器，然后调整float先后顺序即可。

2.可以用任意标签作为触发下拉菜单的标签，但是一般来讲使用<span><button><a>这种包含文本内容或者链接含义的标签比较多。

3.创建一个新的容器元素，一般使用<div>较多，来装下拉菜单里面的内容。

4.给整体框架的父元素添加position：relative，然后给要定位的下拉菜单内容添加绝对定位position：absolute，调整位置。

5.在css中将下拉菜单内容设置为display：none，将其隐藏，在遇到：hover等被触发时再display：block显示出来。

ps:自己写的时候发现了之前没有注意到的一个问题，就是要记得将hover放在整体父元素容器上，不然会出现鼠标移入下拉菜单时下拉菜单消失的问题。。。

6.最后就是进行美化了，将下拉菜单添加box-shadow增加质感之类的...

附一个代码示例：

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

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob</p>
  </div>
</div>