纯css3实现菜单

1、:target 实现菜单展开

实现参考：CSS3 结构性伪类选择器—target

关键代码:

            .sub-menu {
                display: none;
            }
            :target {
                display: block;
            }

2、 input 实现菜单

实现参考：教你用css3写导航目录

关键代码:

            /* 设置高度 */
            .input_menu > li {
                line-height: 32px;
            }
            /* 设置checkbox 占满父菜单项目，并不可见 */
            .input_menu input {
                position: absolute;
                width:100%;
                height: 32px;
                z-index: 5;
                opacity: 0;
            }
            /* 子菜单默认隐藏 */
            .sub_menu {
                display: none;
            }
            /* checkbox选中时 子菜单显示 */
            .input_menu input:checked ~.sub_menu {
                display: block;
            }