一般导航会有二级目录，二级目录的展开或者隐藏需要用到鼠标点击事件的监听，所以一般我们会用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
