Menu scanu / login

by Clear

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<nav class="menu">
    <div class="align">
	<a class="link" id="active-menu" href="#">home</a>
	<a class="link" href="#">plugins</a>
	<a class="link" href="#">themes</a>
        <a href="#"><div class="logo-scanu"></div></a>
	<a class="link" href="#">web-design</a>
	<a class="link" href="#">media</a>
    <a class="link" href="#">calendar</a>
    </div>
    <input class="input-login-button" type="checkbox" id="input-login">
    <label id="login-panel" for="input-login">
        <i class="fa fa-user"></i>
    </label>
    <div class="login-panel">
        <form name="#" action="#" method="#">
          <input type="text" name="username" placeholder="username" class="username-input">
          <input type="password" name="username" placeholder="password" class="password-input">
          <br />
              <input class="input-remember-me" type="checkbox" id="input-remember">
    <label id="remember-me" for="input-remember">
         Remember me
                  </label><br />
              <span class="forgot-psw" ><a href="#">Forgot password?</a></span>
              <input class="register-button" type="submit" value="register">
              <input class="login-button" type="submit" value="login">
        </form>
    </div>
</nav>
    <hr style="clear: both; visibility: hidden;" />

CSS

body {
    background: #fff;
    margin: 0px;
}

.logo-scanu {
    background: transparent url(http://dvdimagehosting.altervista.org/images/logomim.png) no-repeat;
    height: 62px;
    width: 62px;
    float: left;
    margin-left: 20px;
    position: relative;
    top: -8px;
}

.menu {
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    height: 62px;
    padding-top: 8px;
    box-sizing: border-box;
    overflow: visible;
}

nav .link {
	position: relative;
	float: left;
	outline: none;
	color: #eb0028;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	font-size: 1.35em;
    font-family: 'Raleway', sans-serif;
    margin-left: 20px;
}

nav .link:hover,
nav .link:focus {
	outline: none;
}

.menu .link {
	padding: 10px;
	color: #000;
	font-weight: 600;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.menu .link::before,
.menu .link::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #eb0028;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.menu .link::before {
	top: 0;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.menu .link::after {
	bottom: 0;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.menu .link:hover,
.menu .link:focus {
	color: #eb0028;
}

.menu .link:hover::before,
.menu .link:focus::before,
.menu .link:hover::after,
.menu .link:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

#active-menu {
	color:...