纯CSS制作的响应式折叠菜单分享

        left: 0;   
        border: solid 1px #aaa;   
        background: #fff url(images/icon-menu.png) no-repeat 10px 11px;   
        border-radius: 5px;   
        box-shadow: 0 1px 2px rgba(0,0,0,.3);   
    }   
    .nav li {   
        display: none; /* hide all <li> items */  
        margin: 0;   
    }   
    .nav .current {   
        display: block; /* show only current <li> item */  
    }   
    .nav a {   
        display: block;   
        padding: 5px 5px 5px 32px;   
        text-align: left;   
    }   
    .nav .current a {   
        background: none;   
        color: #666;   
    }   
  
    /* on nav hover */  
    .nav ul:hover {   
        background-image: none;   
    }   
    .nav ul:hover li {   
        display: block;   
        margin: 0 0 5px;   
    }   
    .nav ul:hover .current {   
        background: url(images/icon-check.png) no-repeat 10px 7px;   
    }   
  
    /* right nav */  
    .nav.rightright ul {   
        left: auto;   
        rightright: 0;