CSS实现鼠标移入弹出下拉框

前言
最近比较沉迷CSS,所以我现在来做个鼠标的交互效果
HTML

<ul>
<li>测试</li>
<li>测试</li>
 
<li title="字号">
                    <i class="fa fa-text-height"></i>
                    <div style="transform: translateX(-35%);">
                        <p class="EditorMenu_ul_li_div_p noPaddingAndMargin">设置字号</p>
                        <ul>
                            <li>x-small</li>
                            <li>small</li>
                            <li>normal</li>
                            <li>large</li>
                            <li>x-large</li>
                            <li>xx-large</li>
                        </ul>
                    </div>
                </li></ul>

CSS

.EditorMenu ul {
        margin: 0;
        padding: 0px;
        height: 100%;
        display: flex;
        text-align: center;
        margin: 0px 5px;
    }
 
        .EditorMenu ul li {
            display: block;
            width: 36px;
            line-height: 2.3em;
            position: relative;
        }
 
            .EditorMenu ul li:hover {
                cursor: pointer;
            }
 
                .EditorMenu ul li:hover i {
                    color: #000 !important;
                }
 
                    .EditorMenu ul li:hover i svg path {
                        fill:#000;
                    }
 
                    .EditorMenu ul li:hover div {
                        z-index: 2;
                        display: block;
                        animation: EditorMenuAnima ease 0.5s forwards;
                    }
 
@keyframes EditorMenuAnima {
    0% {
        top:-100px;
    }
    30% {
        top: 35px;
    }
    60% {
        top: 20px;
    }
    100% {
        top: 35px;
    }

效果

后言
本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进