css实现下拉菜单以及下拉箭头旋转效果

<div class="header-admin">
    <div class="header-admin-name">用户名</div>
</div>

.header-admin-name{
    position: relative;
}

.header-admin>div.header-admin-name::before {
    content: '';
    position: absolute;
    right: -18px;
    top: 50%;
    margin-top: -3px;
    width: 12px;
    height: 6px;
    cursor: pointer;
    background: url("../../assets/img/icon_arrow.png") no-repeat;
    -webkit-transition: all .2s;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
}

.header-admin:hover>div.header-admin-name::before{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transition: transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
    -ms-transition: -ms-transform 0.2s;
}