CSS转换从左到右工作，从右到左不工作

Question

如果你访问我的网站：http://warringah-plastics.com.au/wplastics 当您将鼠标悬停在主导航中的菜单项上时，您会看到一个指示箭头显示在其顶部。然后，当您在菜单上从左到右移动鼠标时，CSS 过渡非常平滑。但是当您从右向左移动时，过渡类型会跳过菜单项并且看起来不太好。目前我正在将此 CSS 应用于 nav li 元素：

transition: all 0.5s ease-in-out 0s !important;

我尝试过使用悬停 CSS，但没有成功。提前致谢！

Answer 1

编辑：

我建议只使用 css 方法，有很多方法可以做到这一点。 至少对我来说看起来很流畅。 JSFIDDLE：http://jsfiddle.net/Victornpb/u85as/226/ 和 http://jsfiddle.net/Victornpb/u85as/236

ul{
    width: 100%;
    margin: 0;
}
li{
    display: inline-block;
    border: 1px solid red;

    width: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

li:nth-child(1):hover ~ #arrow{
    margin-left: 0;
}
li:nth-child(2):hover ~ #arrow{
    margin-left: 100px;
}
li:nth-child(3):hover ~ #arrow{
    margin-left: 200px;
}
li:nth-child(4):hover ~ #arrow{
    margin-left: 300px;
}
li:nth-child(5):hover ~ #arrow{
    margin-left: 400px;
}

li:hover ~ #arrow{
    opacity: 1;
}

#arrow{
    margin-left: -50px;
    border:0px solid red;
    position:relative;
    width:100px;
    text-align:center;
    opacity: 0;

    transition:All 1s ease;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
}
#arrow:before{
    content:"";
    display:block;
    width:0;
    border:10px solid red;
    border-color:red  transparent transparent transparent;
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-10px;
}

标记：

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>

    <div id="arrow"></div>

</ul>

---

注意事项

我看不到任何过渡。

但是您在某处严重泄漏，首先该页面花了将近一分钟来加载所有内容。请求栏（蓝色），在 44.5 秒后停止加载。

在此之前，页面会像一百万个事件一样触发，认真看看滚动条的大小。和 huuuge 黄色条。