give this a try
HTML
<div class="signup" >
<a href="#">LOGIN</a>
</div>
<div class="login_form ">
<form method="post" action="#">
<p>Email</p>
<p><input type="email" name="email" class="email" placeholder="Email"></p>
<p>Password</p>
<p><input type="password" name="password" class="password" placeholder="Password"></p>
<br>
<p><span><input type="checkbox" name="check" class="check" style="vertical-align:middle;">Remember me</span><span class="login_btn" ><a href="#">Login</a></span> </p>
</form>
</div><!-- login_form -->
CSS
.signup
{
background-color:rgb(255,255,255);
width:25%;
height:25px;
border-color:rgb(221,221,221);
border-width:1px;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
border-style:solid;
text-align:center;
padding:9px 8px 0 5px;
margin-top:10px;
}
.signup a
{color:#444444;
font-size:0.9375em;
text-decoration:none;
}
.login_form
{
width:50%;
height:auto;
padding:10px 0 0 0;
position:absolute !important;
}
.login_form p
{line-height:150%;
font-size:0.875em;
color:#535353;
padding-left:5px;
}
.email, .password
{border:1px solid #D9D8D7;
width:96%;
}
.login_btn
{
display:block;
width:80%;
padding:3px 0 5px 0;
border-color:rgb(242,128,8);
border-width:1px;
border-style:solid;
text-align:center;
margin-bottom:2px;
}
.login_btn a
{color:#fff;
}
JS
$(".login_form").hide();
$(".signup, .login_form").click(function(e) {
$(".login_form").show();
e.stopPropagation();
return true;
});
$(document).click(function(){
$('.login_form').hide(); //hide the form
});
try out the functional fiddle here