CSS過渡從左到右工作，右到左不工作

Question

如果你去我的網站：http://warringah-plastics.com.au/wplastics 你可以看到，當你將鼠標懸停在主導航菜單項上時，指示箭頭出現在它的頂部。然後，當您從左向右移動鼠標時，CSS轉換非常平滑。但是，當您從右向左移動時，過渡類型的快照通過菜單項並且看起來不太好。目前，我正在將這個CSS應用到導航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黃色酒吧。