Css 如何让李在悬停时滑入滑出？

我怎样才能使李的滑入/滑出悬停？ 我试着给li加上负的左值，然后在悬停时将左设置为零，但对我来说不起作用

这是我的代码：

HTML

<nav class="menu">
        <ul>
            <li class="active"><a href="#">EN</a></li>
            <li><a href="#">LV</a></li>
            <li><a href="#">RU</a></li>
        </ul>
    </nav>

---

这就是你的想法？使用

转换

：

是的，谢谢，这正是我想要的，还有一个问题，如果我将鼠标悬停在li元素附近，li元素将显示，但它实际上应该在鼠标悬停在li元素上之后显示。您需要检查元素并检查元素的渲染方式。例如，每当

ul

悬停时，您都会悬停，其中包含所有

li

子项以及左侧的一些填充。

.menu ul {
    list-style-type: none;
    float: left;
    display:;
}

.menu li {
    visibility:hidden;
    opacity:0;
    transition:opacity 0.6s linear;
    display: inline-block;
}

.menu li:first-child {
    visibility:visible;
    opacity:1;
}

.menu ul:hover > li {
    visibility:visible;
    opacity:1;
}

.menu a {
    text-decoration: none;
}

.menu a:hover {
    color:red;
}