*因为本站没有还没实现插图上传功能，所以接下来需要想象力……

背景说明：

我司某站点前端重构， 当前处于新老页面并行阶段。 新页面使用的是vue + element-ui。配合样式改版。 原jquery框架的导航栏要跟随改版。其中遇到hover父级菜单时，悬浮展示子菜单。有展开，收起动效。因为现在css 非常强大，所以使用纯css 开发。

设计思路：

1.最初想到的是使用 transition:height .3s 这种方法。使子菜单动态展开收缩。 但是由于每个子菜单height 不固定。动态height 下，该方法失效。

2.后来想到transform: scaleY(0); =》transform: scaleY(1);这个方案。但是效果不是很好。元素是从子菜单的中线开始收缩扩展的。 没有从父级菜单推出来的感觉。

3.现在开始思考如何使中线从顶部开始向下推。这里用到了盒模型。即，为子菜单设定一个父元素。该元素高度为0，超出模型部分不裁剪（默认是这样的。）子元素是从父元素的中部开始展开的，切子元素不会超过父元素顶部，只会从右侧和下部溢出。效果实现

代码参考：

.el-menu-sub {
        margin-top: 5px;
        padding: 5px 0;
        width: 104px;
        height: 0px;
        background-color: none;
        border-radius: 2px;
        z-index: 100;
        border: none;
        transition-duration: .3s;
        transform: scaleY(0);        
    }

        .el-menu-sub ul {
            border-radius: 2px;
            background-color: #fff;
            -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        }

    .el-menu-item:hover .el-menu-sub {
        transform: scaleY(1);
        transition-duration: .3s;
    }