示例图：

鼠标悬浮显示二级菜单

//css
.downAlls{
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            position: relative;
        }
        .ineerList{
            position: absolute;
            left: -20px;
            top: 60px;
            width: 125px;
            height: 0px;
        }
        .ineerList li a{
            display: none;
            color: #fff;
        }
        .ineerList li i{
            display: none;
        }
        .downAlls:hover .ineerList li{
            height: 40px;
            transition: height 0.5s;
            overflow: hidden;
        }
        .downAlls:hover .ineerList li a{
            display: block;
        }
        .downAlls:hover .ineerList li i{
            display: block;
        }
        .downAlls:hover .sanjiao{
            transition: all 0.2s;
            background: url(../../images/sanjiaozhen.png) no-repeat;
            background-size: 100% 100%;
        }
        .ineerList li:hover{
            color: #fff;
            background: #57a3f3;
        }
        .ineerList li{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 0px;
            line-height: 40px;
            background: #234d7b;
            text-align: left;
        }
        .sanjiao{
            display: inline-block;
            width: 18px;
            height: 9px;
            background: url(../../images/sanjiao3.png) no-repeat;
            background-size: 100% 100%;
        }
        .mo_icon{
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-left: 22px;
            margin-right: 10px;
            background: url(../../images/passwordEdit.png) no-repeat;
            background-size: 100% 100%;
        }
        .Can_icon{
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-left: 22px;
            margin-right: 10px;
            background: url(../../images/cancel3.png) no-repeat;
            background-size: contain;
        }



二、html

<div class="downAlls">您好，<span style="margin-right: 9px">芋头</span> <i class="sanjiao"></i>
                <ul class="ineerList">
                    <li><i class="mo_icon"></i><a href="#" @click="">修改密码</a></li>
                    <li><i class="Can_icon"></i><a href="#">注销&nbsp;&nbsp;</a></li>
                </ul>
            </div>