今天完成了什么：

真正意思上完成下拉菜单框，并添加了一些更美观的样式花了点时间，学个下拉框用了一天进度是有点慢，今天弄了下公众号推文和教了下师弟安装ps和切图。

遇到了什么问题：

开始下拉列表盒子的宽度跟所在地的盒子不一致。原因是下拉框的盒子跟所在地的盒子一样设置了33.3%。我以为也是直接继承所在地盒子的33.3%全部，后来才知道应该把下拉列表的盒子改为100%才能继承它的盒子的父元素所在地盒子一样大。

制作三角形符号的时候发现不会居中，仔细排除检查发现是选择器选择错误，三角形符号找的定位父元素是一开始设置下拉列表的大盒子。而不是p元素等其他元素，也就是说需要绝对定位的盒子它会主动一层层往上找到有相对定位了的盒子才会定位，这时候用lrtb属性来定位三角形符号的需要的距离，

，

筛选框俩个叠在一起了，检查发现还是选择器的问题。没有给包裹这些列表的盒子添加：after伪元素。导致倆个盒子出现这种情况。

后面修改正确后的代码

做到后面想美化下拉列表样式，于是请教师兄当很多选项的出现的有没有下拉框之类的样式，得知overflow可以设置样式，所以查了下样式填了overflow：auto出现了滚动条，但是想着自己接触的页面好像没有人傻傻的放滚动条去，所以问师兄才得知添加个装这个列表现的大盒子设置它的宽高overflow：hidden。同时把绝对定位和display：none添加进来，取消原来的小盒子的绝对定位。之后在小盒子添加overflow-y：scroll和overflow-xhidden。

总的说方法就是要隐藏滚动条并且实现下拉功能，要建立个装列表项的更大的盒子设置它的绝对定位和overflow：hiddden以及宽高。这宽高是给他们整个大盒子设计的。然后在小盒子那里设置overflow-y和x的属性，并继承父元素的高100%，并把小盒子添加个magin-right负值，使其小于大盒子的值，这样就能隐藏掉滚动条。具体的也可以百度“隐藏滚动条并且实现下拉功能”

收获了什么：

学会制作下拉框初步美化。下拉框悬浮效果是根据绝对定位和相对定位以及：hover选择器产生的一种样式，另外在提示框的用途上也会用到。

主要步骤：

拉列框大盒子父元素添加相对定位，

在列表小盒子box添加display：none隐藏属性，和absoulte绝对定位，默认隐藏列表。

再各个更小的盒子添加：hover选择器添加display:block来显示列表。即鼠标经过会显示下拉列表。

学会使用display：none属性、display：block，overflow属性、：hover选择器。以及制作三角形，对定位更深了解

明天计划什么：

加快脚步完成任务6。