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;
    }

效果

後言
本文結束了，如果覺得本技術文章對你有幫助請給我點個贊,如果有什麼不足的地方，給我提意見，讓我加以改進