下拉菜单滑动效果(animation实践)

思路：通过给父元素设定固定的宽度和高度以及设置overflow:hidden属性将超出的ul li列表隐藏掉。视觉上看到的上下滑动的其实是父元素的高度，而不是ul li列表，列表并没有动过。但视觉上感觉到的就是ul li列表在上下滑动。
完整代码如下：

 <title>下拉菜单滑动效果</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .ulList{
            width:100px;
            height:27px;
            overflow:hidden;//将超出固定高度的部分给隐藏起来
            margin:auto;
            transition:all 0.5s linear;
        }
        .ulList:hover{
            height:137px;//将父元素高度拉长以让列表包含在内给显示出来
        }
        .ulList>li{
            list-style:none;
            background-color:palegreen;
            text-align:center;
            border:1px solid black;
            height:25px;
            line-height:25px;
        }
        a{
            text-decoration:none;
            color:black;
        }