用纯css3写导航目录

       一般导航会有二级目录，二级目录的展开或者隐藏需要用到鼠标点击事件的监听，所以一般我们会用js写，但如果你还在写html css js或者是jQuery这种三合一的又大又长的项目，那么css能做到的就尽量不要用js写，�这能大大的优化代码

---

所以今天要教大家一个css的导航目录

先放一个效果图

1.png

然后发一下html

2.png

这里需要用到css3的input：checked

首先要用opacity：0让input隐藏并且设置宽高使input充满li，不然不能�触发checked

3.png

当然li下面的ul也要隐藏掉

4.png

然后是input得checked属性以及css3动画

5.png

最后还有一个hover的变换颜色

6.png

好了，大功告成，这样一个css的导航便做出来了,最后告诫大家一句：能用css写的就不要用js写！