css下拉列表怎么设置(css实现下拉菜单效果)-昊阳知识网

在页面中导航的内容如果很多，为了划分清晰我们会做成下拉菜单的方式。那么我们经常都会使用JQ来操作、配合下拉动画完成对下拉菜单功能的编写，其实下拉菜单的效果，我们只用Css就可以解决，代码简单、效果流畅。

一、逻辑分析

首先我们将分析这个功能的实现方法。我们需要用到悬停伪类配合定位、变形来模仿JQ中的hover();方法。

1.需求：

1)当鼠标移入First 时，弹出二级菜单。

2)当鼠标移出 First 时，遣散二级菜单。

2.知识点：

1)弹性布局 flex-box

2)相对定位中绝对定位position:absolute;position:relative;

3)变形中的放大 transform:scale();

4)动画中的过渡属性 transition:;

二、代码编写

1. 创建空白页，建立HTML基础结构。

2.写入Css样式。我们先重置样式，保障测试内容在浏览器中央方便查看。

3.使用flex布局时经常会遇到元素个数不够导致最后一行错位的问题。如果使用创建伪元素的方式解决可能又会遇到其他问题，特别是当justify-content设置为space-evenly时。这时可以用另外一种方式，在最后一行增加几个假元素，数量为每一行最大数量减一，并设置height为0。这种方式比较简单，不需要考虑margin的计算等问题。虽然本次内容没涉及到，但是还是提出问题及解决方式，方便大家使用时进行借鉴。