如何让li在悬停时滑入和滑出？

Question

如何在悬停时使李的滑入/滑出？ 我试图添加到负左值，然后在悬停时将左设置为零，但它对我不起作用。

这是我的代码：

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>

CSS

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

JSFIDDLE

Answer 1

这是你的想法？利用transform：https://jsfiddle.net/2u8dt4s2/