CSS Transition Left to Right working, RIght to Left not working

Question

If you go to my site: http://warringah-plastics.com.au/wplastics you can see as you hover over a menu item in the main navigation an indicator arrows shows up on top of it. Then when you move your mouse across the menu left to right the CSS transition is pretty smooth. But when you move from right to left the transition kind of snaps past the menu item and doesn't look nice. Currently I am applying this CSS to the nav li element:

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

I have tried experimenting with the hover CSS but no luck. Thanks in advance!

Answer 1

EDIT:

I suggest using css only approach, there are many ways that this could be done. at least for me look pretty fluid. JSFIDDLE: http://jsfiddle.net/Victornpb/u85as/226/ and 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;
}

Markup:

<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>

---

Notes

I can't see any transition.

But you have a seriously leaking somewhere, first the page took almost a minute to load everything. The requests bar (blue), just stop loadin in 44.5 seconds.

and until then, the page is triggering like a million events, seriously just look at the size of the scrollbar. and the huuuge yellow bar.