html点击出现简单下拉框,怎么用纯css实现点击出现下拉框，抽屉效果那种

/* CSS部分 */

ul { list-style:none; margin:0; padding:0; text-align:center; background:#F03; color:#FFF; -webkit-transform:scaleY(0); -webkit-transform-origin:0 0; }

li { padding:0; margin:0; }

div { width:200px; }

div:hover ul { -webkit-animation:ulShow 0.4s; -webkit-animation-fill-mode:forwards; -webkit-animation-timing-function: cubic-bezier(0,0.8,0.9,1); }

div div { height:30px; line-height:30px; text-align:center; background-color:#FC0; }

@-webkit-keyframes ulShow {

from { -webkit-transform:scaleY(0); }

to { -webkit-transform:scaleY(1); }

}

下拉 

• 第一个
• 第二个
• 第三个

本例适用于谷歌浏览器和Safari浏览器，如需兼容Opera须将“-webkit-”更改为”-o-“，火狐改为“-moz-

”，IE系列比较复杂在此不予举例详情请查询W3C。

追问

这个是hover啊，不是模拟click，不过从你的代码里学到了transform的origin用法，还有animation-fill-mode的用法，谢谢你。

我现在有点怀疑题目只是让hover模拟了，click实在想不出来办法，可惜看不到题目了

追答

/* CSS部分 */

ul { list-style:none; margin:0; padding:0; text-align:center; background:#F03; color:#FFF; -webkit-transform:scaleY(0); -webkit-transform-origin:0 0; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0,0.8,0.9,1); }

li { padding:0; margin:0; }

div { width:200px; }

div button:focus~ul { -webkit-transform:scaleY(1); }

div button { width:200px; border:none; height:30px; line-height:30px; text-align:center; background-color:#FC0; }

下拉

• 第一个
• 第二个
• 第三个

修改版……

有个缺点，由于是focus获得焦点，所以当点击LI中的内容时button会失去焦点，导致ul消失，暂时来讲没有想到其他解决方法，太晚了睡觉了。

温馨提示：答案为网友推荐，仅供参考