菜单缩放（基于动画transform）

效果预览：

实现思路：利用动画的缩放功能transform: scale(x,y)让菜单项元素进行缩放显示。
实现代码：
html

<main>
    <ul>
        <li>
            <strong>my</strong>
            <div>
                <a href="#">me</a>
                <a href="#">mine</a>
                <a href="#">mines</a>
            </div>
        </li>
        <li>
            <strong>goods</strong>
            <div>
                <a href="#">apple</a>
                <a href="#">banner</a>
                <a href="#">berry</a>
            </div>
        </li>
    </ul>
</main>

css

main {
    /*相对页面定位*/
    position: absolute;
    left: 50%;
    top: 50%;
    /*x y轴反向移动使其居中*/
    transform: translate(-50%,-50%);
}

ul {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    width: 400px;
}

ul li {
    position: relative;
}
ul li strong {
    background-color: #95afc0;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
}

ul li strong+div {
    /*让div子元素从上往下排列*/
    display: flex;
    flex-direction: column;
    padding: 10px 30px;
    /*div元素脱离文档流*/
    position: absolute;
    /*让菜单项缩放从左上开始*/
    transform-origin: left top;
    /*让元素最开始消失*/
    transform: scale(0);
    /*让元素不会遮住strong元素*/
    z-index: -1;
    /*控制显示时间*/
    transition: .6s;
    background-color: #95afc0;
}
ul li strong+div a {
    /*设置a标签样式*/
    display: flex;
    padding: 5px;
    font-size: 1em;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

ul li:hover strong+div {
    /*让其显示*/
    transform: scale(1);
}