思路：通过给父元素设定固定的宽度和高度以及设置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;
}
</style>
</head>
<body>
<ul class="ulList">
<li class="liA">LOVE-Family</li>
<li><a href="">father</a></li>
<li><a href="">mother</a></li>
<li><a href="">brother</a></li>
<li><a href="">and me</a></li>
</ul>
</body>
遇到的问题：中途有给子元素设置悬停让父元素某个样式改变时是没有效果的。可能原因是当设置同一个样式时父元素的优先级高于子元素，所以在子元素上面改变父元素的样式是不可以的。