CSS 전환 왼쪽에서 오른쪽으로 작동 중, 왼쪽에서 작동하지 않음

Question

내 사이트로 이동 : http://warringah-plastics.com.au/wplastics 메인 탐색의 메뉴 항목 위로 마우스를 가져 가면 표시기 화살표가 위로 표시됩니다. 그런 다음 메뉴를 마우스 왼쪽에서 오른쪽으로 옮길 때 CSS 전환은 매우 부드럽습니다. 그러나 오른쪽에서 왼쪽으로 이동하면 전환 항목이 메뉴 항목을 지나쳐 멋지게 보입니다. 현재이 CSS를 nav li 요소에 적용 할 예정입니다.

전환 : 모두 0.5s ease-in 0s! important;

나는 공중에 떠오르는 CSS를 실험 해 보았지만 행운은 없다. 미리 감사드립니다!

Answer 1

편집 : CSS에게 유일한 접근 방법을 사용하는 것이 좋습니다

는이 작업을 수행 할 수있는 많은 방법이있다. 최소한 나를 위해 는 꽤 유체처럼 보인다. JSFIDDLE :

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

http://jsfiddle.net/Victornpb/u85as/226/ 및 http://jsfiddle.net/Victornpb/u85as/236 마크 업 :

이

<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 초 만에 중지합니다.

그리고 그때까지는 페이지가 100 만 개 이상의 이벤트를 발생 시켰습니다. 스크롤바의 크기 만 봐도 알 수 있습니다. 그리고 황색의 노란색 막대.