Animated Sliding Menu With Pseudo Selectors and CSS3

HTML

<div id="menu">
    <ul>
        <li><a href="#" class=Home</a><a href="#">See Us</a></li>
        <li><a href="#" class=About</a><a href="#">Meet Us</a></li>
        <li><a href="#" class=Contact</a><a href="#">Email Us</a></li>
    </ul>
</div>

CSS


*{ margin:0px; padding:0px;}
#menu {
height: 100px; width: 670px;
overflow: hidden;
margin: 50px auto;
text-align: center;
}

#menu ul li {
float: left;
margin: 0 5px;
list-style-type: none;
}

#menu ul a:nth-of-type(even) {
background: #000;
color: white;
}

#menu ul li:hover :first-child {
margin-top: -100px;
}

#menu ul a {
display: block;
background: #e70f23; color: #fff;
height: 100px; width: 200px;
font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration: none;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
}