鼠标移入图片 这个效果如何以最少的代码实现？比如只用css可以吗？

多张图片
1.鼠标移入图片，出现下拉按钮，mouseover show
2.点击下拉按钮，出现下拉框，click slidedown
3.移开下拉框区域，下拉框收回，mouseout slideup
4.移开图片，下拉按钮消失 mouseout hide

用css如何实现？或者简短的jquery代码？js代码呢？

---

<style>
.box {
    width: 100px;
    height: 100px;
    position: relative;
}
.select {
    width: 100px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.box:hover .select{
    display: block;
}
.select ul {
    position: absolute;
    width: 100px;
    height: 40px;
    display: none;
}
.select li {
    width: 100px;
    height: 20px;
    float: left;
}
.select:hover ul{
    display: block;
}
</style>

就是点击效果实现不了，没测试