过渡前后带走底边框

Question

我有一个单击下拉菜单，该菜单具有高度动画效果，但是它有2px的边框，并且在关闭菜单时总是显示边框。基本上，它会显示一个2px的小条，显示菜单。我在本地工作，因此发送所有代码有点困难，但这是这样的： （user__nav是ul）

.user__nav {
        margin-top: 10px;
        background-color: #fff;
        position: absolute;
        border: 2px solid #2D3E65;
        border-radius: 0 0 12px 12px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.7s;


        ul>li {
            padding: 5px 0 5px 20px;
            a {
                color: #2D3E65;
                font-weight: 500;
            }
            &:hover {
                background-color: #2D3E65;
                a {
                    color: #fff;
                }
            }
            &:last-child {
                border-radius: 0 0 9px 9px;
            }
        }
    }
}

单击元素时，我将以下类应用于它：

.profile-transition {
max-height: 170px !important;
}

我还尝试从.user__nav {}中取出边框并将其置于配置文件转换中，但它似乎根本不起作用：

.profile-transition:before {
border: 2px solid #2D3E65;
}

.profile-transition:after {
border: 2px solid #2D3E65;
} 

任何事情都会有所帮助！谢谢！