CSS3 | Transition 下拉菜单

Transition (过渡) 是CSS3的新特性，可以让元素的height/width/scale等属性在变化时能平滑的过渡，我也是第一次用，实现了一个下拉菜单功能。

<div class="container">
    <div class="menu1">
        <span>鞋子</span>
        <div class="list1-container">
            <div class="list1">
                <ul>
                    <li>耐克</li>
                    <li>阿迪达斯</li>
                    <li>puma</li>
                </ul>
            </div>
        </div>
    </div>
		
    <div class="menu2">衣服</div>
</div>

     <style>
        .list1-container{
		width: 100px;
		position: absolute;
		transform: translateY(10px);
		background-color: gray;
		color:white;

		/*0->60px*/
		height: 0px; 
		overflow: hidden;

		transition: height 0.3s;
	}
	.list1{
		height: auto;
	}
    </style>