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

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

测试
测试


                    
                    

                        
设置字号
                        

                            
x-small
                            
small
                            
normal
                            
large
                            
x-large
                            
xx-large
                        
                    
                

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

效果

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