今天完成的任务

a.日报6.16-6.20的温习

b.任务5的下拉列表学习和制作 这里进度有点慢，知识点没吃透消化。

c.拓展知识

明天的计划

a.日报6.20-6.22的温习

b.任务5的继续制作

c.拓展知识

遇到的问题：

a.又又又又犯老毛病了，代码出了疏忽，有一个地方n错写成了m，结果出问题的时候找了大半天。。。没有师兄帮忙指出，我估计会急到当场去世......以后每次写完代码一定要告诫自己检查在检查

b.列表制作过程中知识点没吃透，做的有点困难，边做边理解，有时候还会有一些小想法就自己实践 比如我前面写了.nav > li{ }.定义.nav子元素里面的li列表， 但是我下面的列表都带入了class="down" 所以我就试了下能不能把.nav > li去掉 里面的属性直接加到 down里，因为结果都一样嘛。

收获：

nav>ul只选择nav下一级里面的ul元素，例如上面dom结构里id为a的ul。

nav ul选择nav内所包含的所有ul元素，例如上面dom结构里面id为a、b、c的全部ul。

nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

.nav a 就是.nav 类下面的a标签

DropDown是一个简单的下拉列表效果插件。

CSS cursor:  一些不同的光标：

CSS :hover 选择器： 选择鼠标指针浮动在其上的元素，并设置其样式

用纯css实现下拉列表

第一种:display:none和display:block切换

这是首先考虑到的实现方法，给 .drop-down-content 添加display:none，当悬浮在.drop-down上时 .drop-down-content的display变成block，缺点是不能添加过渡属性，慢慢弹出下来菜单。当.drop-down-content显示时会把后面的盒子往下挤，因为.drop-down-content 显示时是存在于文档流中的，给.drop-down设置position:relative，.drop-down-content设置position:absolute，使下拉菜单脱离了文档流来解决

第二种方法:给悬浮的这个li设置一个固定高度，然后设置超出部分隐藏，悬浮时显示

有个问题：h3段落里面的文字会从下拉菜单中透过来，并且鼠标放在字上面的时候下拉菜单会缩回。

解决方式有两种：1.给.drop-down设置position:relative，.drop-down-content设置position:absolute。

　　　　　　　　2.给h3设置position:relative;z-index:-1。

第三种方法：给下拉菜单设置固定的高度，下拉菜单的内容设置透明opacity: 0;，悬浮在下拉菜单时opacity: 1;来实现

上面的几种方法都是不能添加过渡效果的，鼠标滑过时下拉菜单就马上弹出来了，用户体验不是很好，下面这种方法可以添加过渡的效果来实现一定时间内来弹出

方法四：将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。

也会出现上面同样的问题，两种解决方式，

做这个demo时我碰到误区，以为把下拉菜单ul值设置为0，下拉菜单整体会隐藏掉，实际上是ul的高度变为了0，但是里面的内容并没有变化，觉得跟做导航时浮动li，ul的高度变成了0，li还能显示一样。一定要给ul设置overflow:hidden，整个下拉菜单才会隐藏。顺带提一句：我们做导航条的时候一般都是左浮动li标签，ul的高度就变成了0，然后给ul设置overflow:hidden，ul就会有高度了，包裹了li标签，后面的盒子会正常布局。

方法五：设置包裹下拉菜单的li元素position:relation;下拉菜单绝对定位，left：-999px;使下拉菜单跑到左边浏览器外面看不到的地方，悬浮时，left:0;使其出现在浏览器中显示。

参考资料（代码 demo):https://www.cnblogs.com/yewenxiang/p/6064117.html

总结（虽然上面有5中方法，不过我现在没有发现其中的优劣。emm因为学习的display:block 所以选的第一种，有时间会每一个都试一试，然后找到其中的有点和区别，能够区别那种适用于什么情景里）