CodePen

HTML

            
              <div id="container">
<div class="footer">
		
<div class="box">
	<div class="arrow-down">
		<div class="fname">Most Popular Categories</div>
	</div>
	<div class="col1">
		<div class="col1-half">
			<ul>
				<li><a href="">PlayStation 3</a></li>
				<li><a href="">Xbox 360</a></li>
				<li><a href="">3D Movies</a></li>
				<li><a href="">Nintendo 3DS</a></li>
				<li><a href="">PS Vita</a></li>
			</ul>
		</div><!-- Col1-->
		<div class="col1-half">
			<ul>
				<li><a href="">Cooler Master Chassis</a></li>
				<li><a href="">Thurmaltake Chassis </a></li>
				<li><a href="">Cosair Ram</a></li>
				<li><a href="">Asus Motherboards</a></li>
			</ul>
		</div><!-- Col1-half-->
	</div><!--Col1 Div End-->
</div>

<div class="box">
	<div class="arrow-down2">
		<div class="fname">Website Information</div>
	</div>
	<div class="col2">
    <div class="col2-half">
			<ul>
				<li><a href="">Login</a></li>
				<li><a href="">Your Account</a></li>
				<li><a href="">Register</a></li>
				<li><a href="">Order History</a></li>
				<li><a href="">SiteMap</a></li>
			</ul>
		</div>
    <div class="col2-half">
			<ul>
				<li><a href="">Delivery Information</a></li>
				<li><a href="">Privacy Policy</a></li>
				<li><a href="">Terms And Conditions</a></li>
				<li><a href="">FAQs</a></li>
			</ul>
		</div>
	</div><!-- Col2-->
</div>

<div class="box">
<div class="arrow-down2">
		<div class="fname">Extras</div>
	</div>
	<div class="col3">
			<ul>
				<li><a href="">Vendors</a></li>
				<li><a href="">Specials</a></li>
			</ul>
	</div><!-- Col3-->
</div>
<!-- Section 2 -->
<div class="box">
	<div class="arrow-down2">
	<div class="fname">Entertainment Zone</div>
	</div>
	<div class="col4">
		<ul>
			<li><a href="">Game Zone</a></li>
			<li><a href="">Movie Zone</a></li>
		</ul>
	</div>
</div>

<div class="box">
	<div class="arrow-down2">
	<div class="fname">Business Information</div>
	</div>
	<div class="col5">
		<ul>
			<li><a href="">Custom Website Desigins</a></li>
			<li><a href="">Contact</a></li>
			<li><a href="">About Us</a></li>
		</ul>
	</div><!-- Col2-->
</div>

<div class="box">
<div class="arrow-down2">
<div class="fname">Get Social</div>
</div>
</div>
			
</div>
</div>
            
          
!

CSS

            
              html {
	padding: 0px;
	margin: 0px;
}

body {
	margin: 0px;
	padding: 0px;
	background: #28292A;
	height: 600px;
}

#container {
	width: 1200px;
	margin: 0px auto;
	min-height: 60px;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
.footer {
	padding-top: 2%;
}
.box {
	float: left;
	margin-left: 2.4%;
	min-height: 60px; 
	margin-bottom: 20px;
}
.box:nth-of-type(1) { width: 36.3%;}
.box:nth-of-type(2) { width: 27%;}
.box:nth-of-type(3) { width: 27%;}
.box:nth-of-type(4) { width: 27%;}
.box:nth-of-type(5) { width: 36.3%;}
.box:nth-of-type(6) { width: 27%;}

.arrow-down {
	background-color: #f5f5f5;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#8A0808),to(#DF0101));
	background-image: -webkit-linear-gradient(top,#8A0808,#DF0101);
	background-image: linear-gradient(to bottom,#8A0808,#DF0101);
	background: "",-webkit-gradient(linear,left top,left bottom,from(#8A0808),to(#DF0101));
	background: "",-webkit-linear-gradient(top,#8A0808,#DF0101);
	background: "",linear-gradient(to bottom,#8A0808,#DF0101);
	background-color: #8A0808;
	background-image: -webkit-linear-gradient(bottom,#8A0808,#DF0101);
	background-image: -moz-linear-gradient(bottom,#8A0808,#DF0101);
	
	width: 435px; 
	height: 30px;
	margin-top: 12px;
	line-height: 30px; 
	border-radius: 5px;
	color:white;
	position:relative;
}

.arrow-down:before {
  	content:"";
  	position:absolute;
  	top:100%;
  	left:10px;
  	width: 0px;
  	height: 0px;
  	border-left: 15px solid transparent;
  	border-right: 15px solid transparent;
  	border-top: 15px solid #8A0808;
}
.fname {
	padding-left: 20px;
	font-size: 20px;
	font-weight: bold;
}
.arrow-down2 {
	background-color: #f5f5f5;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#8A0808),to(#DF0101));
	background-image: -webkit-linear-gradient(top,#8A0808,#DF0101);
	background-image: linear-gradient(to bottom,#8A0808,#DF0101);
	background: "",-webkit-gradient(linear,left top,left bottom,from(#8A0808),to(#DF0101));
	background: "",-webkit-linear-gradient(top,#8A0808,#DF0101);
	background: "",linear-gradient(to bottom,#8A0808,#DF0101);
	background-color: #8A0808;
	background-image: -webkit-linear-gradient(bottom,#8A0808,#DF0101);
	background-image: -moz-linear-gradient(bottom,#8A0808,#DF0101);

	
	width: 324px; 
	height: 30px;
	margin-top: 12px;
	line-height: 30px; 
	border-radius: 5px;
	color:white;
	position:relative;
}

.arrow-down2:before {
  	content:"";
  	position:absolute;
  	top:100%;
  	left:10px;
  	width: 0px;
  	height: 0px;
  	border-left: 15px solid transparent;
  	border-right: 15px solid transparent;
  	border-top: 15px solid #8A0808;
}
.col1-half, .col2-half {
	float: left;
	width: 45%;
}
.col2-half {
  margin-left: 5%;
}
.col1 .col2 .col3 col4 .col5 ul {
	margin-left: 0px;
	margin-top: 20px;
	padding: 0px; 
}
.col1 .col2 .col3 .col4 .col5 li {
	list-style: none;
}
.col1 .col2 .col3 .col4 .col5 a {
	display: block;
	color: #fff;
	text-decoration:none;
	margin-bottom: 8px;
  font-size: 18px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................