鼠标滑过-下拉功能

<!-- html -->
<div class="languageSele">
    <div class="seleted">
        <div class="text"><span>English</span></div> <span class="icon_arrow"></span>
    </div>
    <div class="options" style="--option_len: 7;">
        <ul>
            <li style="--order: 1;">
                <p><span>English</span></p>
            </li>
            <li style="--order: 3;">
                <p><span>阿拉伯语</span></p>
            </li>
            <li style="--order: 4;">
                <p><span>中文4</span></p>
            </li>
            <li style="--order: 2;">
                <p><span>中文2</span></p>
            </li>
            <li style="--order: 5;">
                <p><span>中文5</span></p>
            </li>
            <li style="--order: 6;">
                <p><span>中文6</span></p>
            </li>
            <li style="--order: 7;">
                <p><span>中文7</span></p>
            </li>
        </ul>
    </div>
</div>

<!-- css -->
<style>
    /* languageSele s */
    .languageSele {
        --head_h: 26px;
        --gap: 4px;
        --arrow_w: 1em;
        --color: #fff;
        --durling: .3s;
        --duration: .2;
        --duration_scale: .3s;
        display: grid;
        height: var(--head_h);
        position: relative;
    }

    .languageSele .seleted {
        cursor: var(--cursor);
        display: flex;
        align-items: center;
        justify-content: end;
        gap: var(--gap);
        color: var(--color);
        font-size: 16px;
        height: var(--head_h);
    }


    .languageSele .seleted .icon_arrow {
        display: block;
        width: var(--arrow_w);
        height: var(--arrow_w);
        background-color: var(--color);
        --diff_h: 25%;
        transition: var(--durling);
        clip-path: polygon(0% calc(var(--diff_h)), 100% calc(var(--diff_h)), 50% calc(100% - var(--diff_h)));
    }

    .languageSele:hover .seleted .icon_arrow {
        clip-path: polygon(0% calc(100% - var(--diff_h)), 100% calc(100% - var(--diff_h)), 50% calc(var(--diff_h)));
    }

    .languageSele .options {
        --init_delay: calc(var(--duration) * calc(var(--option_len) + 1) * var(--duration_scale));
        --option_len: 2;
        --li_margin_bottom: 2px;
        width: 100%;
        text-align: right;
        overflow: hidden;
        height: 0;
        transition-delay: var(--init_delay);
    }

    .languageSele:hover .options {
        height: calc(var(--option_len) * (var(--head_h) + var(--li_margin_bottom)));
        transition-delay: 0s;
    }

    .languageSele:hover .options[data-visiblity='hidden'] {
        height: 0;
        transition-delay: 0s;
    }


    .languageSele .options ul {
        display: grid;
    }

    .languageSele .options li {
        --order: 1;
        order: var(--order);
        cursor: var(--cursor);
        margin-bottom: var(--li_margin_bottom);
        height: var(--head_h);
        line-height: var(--head_h);
        transition: var(--durling);
        position: relative;
        z-index: calc(var(--option_len) - var(--order));
        overflow: hidden;
        border-radius: var(--head_h);
    }

    .languageSele:hover .options li {}

    .languageSele .options li p {
        transition-duration: calc(var(--duration) * 1s);
        transform: translateY(-100%);
        transition-delay: calc(var(--duration) * calc(var(--option_len) - var(--order)) * var(--duration_scale));
        opacity: 0;
    }

    .languageSele:hover .options li p {
        transform: translateY(0%);
        opacity: 1;
        transition-delay: calc(var(--duration) * var(--order) * var(--duration_scale));
    }

    .languageSele .options li span {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0 calc(var(--arrow_w) + var(--gap));
        box-sizing: border-box;
        transition: .3s;
        background: var(--color);
        user-select: none;
    }

    .languageSele .options li:hover span {
        padding: 0 calc(var(--arrow_w) + var(--gap) *2) 0 calc(var(--arrow_w));
    }

    /* languageSele e */
</style>