анимация CSS3 начинается при зависании над другим элементом?

Question

У меня есть панель навигации, в которой я пытаюсь получить две ссылки для анимации со страницы и заканчивать рядом с моими другими ссылками, когда я наводил курсор на одну из ссылок в моем списке.

Текущие навигационные ссылки:

<div class="links"> 
    <ul> 
    <li> 
     <a href="#">link 1</a> 
    </li> 
    <li> 
     <a href="#">link 2</a> 
    </li> 
    <li> 
     <a href="#">link 3</a> 
    </li> 
    </ul> 
</div> 

и CSS для .links:

.links ul { 
    white-space: nowrap; 
    list-style-type: none; 
    position: fixed; 
    top: 8px; 
    left: 60%; 
    z-index: 4; 
    width: auto; 
    height: 67px; 
} 

.links li { 
    white-space: nowrap; 
    display: inline-block; 
    margin-right: 30px; 
    z-index: 4; 
    height: 40px; 
} 

А вот отношение CSS, наряду с анимацией, что у меня есть в настоящее время, что работает правильно:

.extralinks { 
    position: fixed; 
    top: 8px; 
    left: 90%; 
    animation-name: slidey; 
    animation-duration: 1s; 
    animation-timing-function: ease; 
    animation-delay: 0s; 
    animation-iteration-count: 1; 
    animation-direction: normal; 
    animation-play-state: running; 
/* Safari and Chrome */ 
    -webkit-animation-name: slidey; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-delay: 0s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-direction: normal; 
    -webkit-animation-play-state: running; 
    z-index: 4; 
} 

@keyframes slidey { 
    0% {left: 90%; top: 8px;} 
    100% {left: 40%; top: 8px;} 
} 

@-webkit-keyframes slidey /* Safari and Chrome */ { 
    0% {left: 90%; top: 8px;} 
    100% {left: 40%; top: 8px;} 
} 

.links li:nth-child(3) { 
    background-color: Red; 
} 

разметка для .extralinks

<div class="extralinks"> 
<ul> 
    <li> 
     <a href="#">link 4</a> 
    </li> 
    <li> 
     <a href="#">link 5</a> 
    </li> 
</ul> 
</div> 

Мне нужно сделать так, чтобы, когда кто-то зависает над «ссылкой 3», анимированные ссылки скользят справа и заканчиваются рядом с моими ссылками. Я не совсем уверен, как точно связать анимацию с «ссылкой 3» в моем списке. Любая помощь? Я бы не стал против использования javascript/jquery, я просто не разбираюсь в них.

Спасибо!

Answer 1

Я не совсем понимаю ваши цели, но я сделал некоторые предположения и ударил jsFiddle вместе. Вместо этого я использовал css-переходы, потому что предположил, что это анимация: hover, и это позволило подменю вернуться в его положение.

* { 
    padding:0; 
    margin:0; 
} 
.links { 
    width:100%; 
} 
.links > menu { 
    width:100%; 
    text-align:center; 
} 

.links menu li { 
    display: inline-block; 
    position:relative; 
    padding:0.75em 1em; 
} 
.l3 .extralinks { 
    position:absolute; 
    top:2em; 
    left:100%; 
    z-index: 4; 

    -webkit-transition:all 1s ease-in-out 0s; 
    -moz-transition:all 1s ease-in-out 0s; 
    -o-transition:all 1s ease-in-out 0s; 
    -ms-transition:all 1s ease-in-out 0s; 
    transition:all 1s ease-in-out 0s; 
} 
.l3:hover .extralinks { 
    left:0;  
} 
.l3:hover .extralinks li { 
    display:block; 
} 
.links li:nth-child(3) { 
    background-color: Red; 
} 

    <div class="links"> 
     <menu> 
     <li> 
      <a href="#">link 1</a> 
     </li> 
     <li> 
      <a href="#">link 2</a> 
     </li> 
     <li class="l3"> 
      <a href="#">link 3</a> 
      <menu class="extralinks"> 
       <li> 
        <a href="#">link 4</a> 
       </li> 
       <li> 
        <a href="#">link 5</a> 
       </li> 
      </menu> 
     </li> 
     </menu> 
    </div>