Nav menu

HTML

<nav id="nav">
	<a href="#"><span data-hover="Nav 1">Nav 1</span></a>|
    <a href="#"><span data-hover="Nav 2">Nav 2</span></a>
</nav>

CSS

body {
    background-color:#333;
    margin:0px;
    font-family: Comfortaa;
}
#nav {
    background-color:#61B030;
    width:100%;
    height:40px;
    text-align:center;
    overflow:hidden;
    color:white;
    font-size:2em;
}
#nav span {
    padding-left:10px;
    padding-right:10px;
}
#nav a {
	padding: 0 4px;
	height: 2em;
    color:white;
    text-decoration:none;
}
#nav a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

#nav a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	font-weight: 700;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

#nav a:hover span,
.cl-effect-5 a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}