Wie mache ich Slide-In und Out auf Hover?

Question

Wie kann ich die Li beim Hover ein- und ausblenden? Ich habe versucht, zu li negativen linken Wert und dann auf Hover Set auf Null, aber es hat nicht für mich arbeiten.

Dies ist mein Code:

HTML

<nav class="menu"> 
     <ul> 
      <li class="active"><a href="#">EN</a></li> 
      <li><a href="#">LV</a></li> 
      <li><a href="#">RU</a></li> 
     </ul> 
    </nav> 

CSS

.menu ul { 
    list-style-type: none; 
    float: left; 
    display:; 
} 

.menu li { 
    visibility:hidden; 
    opacity:0; 
    transition:opacity 0.6s linear; 
    display: inline-block; 
} 

.menu li:first-child { 
    visibility:visible; 
    opacity:1; 
} 

.menu ul:hover > li { 
    visibility:visible; 
    opacity:1; 
} 

.menu a { 
    text-decoration: none; 
} 

.menu a:hover { 
    color:red; 
} 

JSFIDDLE

Answer 1

Das, was du im Sinn hatte? Verwendet transform: https://jsfiddle.net/2u8dt4s2/