CSS过渡从左到右工作，从左到右不工作

Question

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

过渡：全部0.5s轻松进出0！重要;

我尝试过悬停CSS，但没有运气。提前谢谢！

Answer 1

编辑：

我建议使用css only方法，有很多方法可以做到这一点。 至少对我来说看起来很流畅。 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黄色吧。