CSS3制作Dropdown下拉菜单的方法

    overflow: hidden;   
    z-index: 100;   
    transform-origin: 100% 0;   
    -webkit-transform-origin: 100% 0;   
    -ms-transform-origin: 100% 0;   
    -moz-transform-origin: 100% 0;   
    }   
}   
.close {   
    display: none;   
    position: fixed;   
    top: 0;   
    rightright: 0;   
    bottombottom: 0;   
    left: 0;   
    z-index: 999;   
    width: 100%;   
    height: 100%;   
    background: transparent;   
}   
&:target .dropdown {   
    @include transform(scale(1, 1));   
    opacity: 1;   
    z-index: 9999;   
}   
&:target .close {   
    display: block;   
}   
}  

稍微解释下上面的SASS代码：默认的情况下是隐藏下拉菜单（采用透明属性opacity 与CSS3的transform的scale 缩小至0，遮罩层则默认隐藏）；当开关触发后透明度变为1且放到至正常的一倍，同时遮罩层显示。为了让下拉菜单更显“下拉”的情况，采用CSS3的origin定位下转换原点。

注意下兼容性，所有主流浏览器均支持 :target，除了 IE8 及更早的版本，移动端的话直接用。稍微理解下你就可以运用到自己的项目中了，have fun！