css实现下拉菜单

admin管理员组

文章数量:1794759

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>

本文标签： 菜单css