今天完成的事情：任务12
明天计划的事情：任务13 
遇到的问题：纯css的下拉菜单，涉及到的所有伪类种类，侧边栏的写法
收获：

纯粹用CSS实现的下拉菜单主要有两种思路：一种是通过visibility属性的切换，另一种是基于display属性的切换。二者在大体的结构上是一致的，只是对于二级子菜单的隐藏和显示的实现策略上有所不同。

共同点在于：

1.  必须将最外层的ul元素的padding属性设为0，以保证整个下拉菜单中的没有无序列表中的自动缩进。同时，将list-style-type设为none，以去除列表项前的标记。

2. 如果主菜单需要横向，则需要把li元素设置为浮动元素，即float: left。

3. 使二级子菜单呈一列的方法是将二级列表的ul元素和li元素设置为相同的宽度。

4.必须把二级列表的ul元素的position属性为absolute，以保证将该元素及其子元素从文件流中去除，这样一来当二级菜单显示的时候不会影响下面的其它元素。

5.下拉菜单后面的页面元素，需要把clear属性设置为left或者both。这是因为下拉菜单被设为了浮动元素，如果不这样做的话后面的页面元素的位置将会不恰当。

6. 需要通过伪类:link、:visited以及:hover来设置元素有焦点和没有焦点时的颜色状态等。

不同点如前所述，即是：当一级菜单项没有焦点的时候，方法一会把二级菜单的ul元素的visibility属性设为hidden，使整个二级菜单不可见；当有焦点的时候，需要把相应的二级菜单的visibility属性改为visible，使其可见。而方法二则将需要不可见的二级菜单ul元素的display元素设为none，当需要可见的时候改为block。

上述状态的切换均通过伪类来完成而不调用JavaScript。