stackoverflow answer

HTML

<!-- header_top -->
<div class="top_bg">
<div class="container">
<div class="header_top">
	<div class="top_left">
		<h2><a href="#">50%off</a> use coupon code "big61" and get extra 33% off on orders above rs 2,229 </h2>
	</div>
	<div class="top_right">
		<ul>
			<li><a href="#">Recently viewed</a></li>|
			<li><a href="contact.html">Contact</a></li>|
			<li class="login" >
						<div id="loginContainer"><a href="#" id="loginButton"><span>Login</span></a>
						    <div id="loginBox">                
						        <form id="loginForm">
						                <fieldset id="body">
						                	<fieldset>
						                          <label for="email">Email Address</label>
						                          <input type="text" name="email" id="email">
						                    </fieldset>
						                    <fieldset>
						                            <label for="password">Password</label>
						                            <input type="password" name="password" id="password">
						                     </fieldset>
						                    <input type="submit" id="login" value="Sign in">
						                	<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>
						            	</fieldset>
						            <span><a href="#">Forgot your password?</a></span>
							 </form>
				        </div>
			      </div>
			</li>
		</ul>
	</div>
	<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- header -->
<div class="header_bg">
<div class="container">
	<div class="header">
		<div class="logo">
			<a href="index.html"><img src="images/logo.png" alt=""/> </a>
		</div>
		<!-- start header_right -->
		<div class="header_right">
		<div class="create_btn">
			<a class="arrow"  href="registration.html">create account <img src="images/right_arrow.png" alt=""/>  </a>
		</div>
		<ul class="icon1 sub-icon1 profile_img">
			<li><a class="active-icon c2" href="#"> </a>
				<ul class="sub-icon1 list">
					<li><h3>shopping cart...

CSS

/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
h4, h5, h6,
h1, h2, h3 {margin-top: 0;}
ul, ol {margin: 0;}
p {margin: 0;}
html, body{
	font-family: 'Open Sans', sans-serif;
	font-size: 100%;
	background: #ffffff;
}
body a{
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
/*-- header_top --*/
.top_bg{
	background: #00405d;
}
.header_top{
	padding:15px 0 5px;
}
.top_left{
	float: left;
}
.top_left h2{
	text-transform:uppercase;
	font-size:12px;
	color:#ffffff;
}
.top_left h2 a{
	color: #000000;
	margin-right:10px;
	padding: 6px 20px;
	background: #ffcc33;
	border:1px dotted;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.top_left h2 a:hover{
	background: #ffffff;
	text-decoration:none;
}
.top_right{
	float:right;
	color: #ffffff;
	margin-top: -5px;
}
.top_right ul{
	padding:0;
	list-style:none;
}
.top_right ul li{
	display: inline-block;
	margin-right: 10px;
}
.top_right ul li:last-child{
	margin-right: 0;
}
.top_right ul li a{
	text-align:center;
	padding: 0px 4px;
	text-transform:uppercase;
	font-size:12px;
	display:block;
	color:#ffffff;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.top_right ul li a:hover{
	color:#ffcc33;
	text-decoration: none;
}
/********** Login *************/
#loginContainer {
    position:relative;
}
#loginContainer a span{
  display:block;
  padding:4px 10px;
}
/* Login Button */
#loginButton { 
    display:inline-block;  
    position:relative;
    z-index:30;
    cursor:pointer;
}
/* Login Box */
#loginBox {
    position:absolute;
	top: 44px;
	right: 0px;
    display:none;
    z-index:29;
}
#loginForm:after {
	content:...