Here we go so people stop posting about it. Thumb it up and stuff yo.

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="footer.css" type="text/css" /><!-- Footer Stylings -->
</head>
<body>
<div id="footer">
<ul id="footer_menu">

<li class="homeButton"><a href="#"></a></li>

<li><a href="#">Account</a>
<div class="one_column_layout">
<div class="col_1">
<a class="headerLinks">Stream</a>

<a class="headerLinks">Messages</a>
<a class="listLinks" style="font-weight:bold;color:white;">Inbox (7)</a>
<a class="listLinks">Sent</a>
<a class="listLinks">Trash</a>
<a class="listLinks">Compose</a>

<a class="headerLinks">Pictures</a>
<a class="listLinks">Manage Albums</a>
<a class="listLinks">Manage Photos</a>
<a class="listLinks">View All</a>

<a class="headerLinks">Information</a>
<a class="listLinks">Basic Info</a>
<a class="listLinks">Contact</a>
<a class="listLinks">Education</a>
<a class="listLinks">Employment</a>
<a class="listLinks">Links</a>

<a class="headerLinks">Friends</a>
<a class="listLinks">All</a>
<a class="listLinks" style="font-weight:bold;color:white;">Requested (13)</a>
<a class="listLinks">Pending</a>
</div>
</div>
</li>

<!-- Begin 3 Columns Menu Item -->
<li><a href="#">Profile</a>
<div class="three_column_layout">

<div class="col_3">
<h2>Example of Three Columns</h2>
</div>

<div class="col_1">
<p>This is a three columns example. Praesent gravida venenatis felis sed egestas.</p>
</div>
<div class="col_1">
<p>This is a bold text. Sed ac tortor lobortis sem gravida consequat et vel mi.</p>
</div>
<div class="col_1">
<p>This is an italic text sample. Curabitur arcu orci, iaculis vel bibendum gravida tortor lobortis.</p>
</div>

<div class="clear"></div> <!-- Use this clear div to separate rows of content -->

<div class="col_1">
<p class="black_box">This is the black box styling. I use it for my private messenger and also my group chat feature.</p>
</div>
<div class="col_2">
<p>Sed lacus est, iaculis sed sagittis ac, malesuada a felis. Vestibulum vitae dictum mauris. Aenean felis nisl, pulvinar quis blandit et, fermentum ut tortor. In condimentum nisi ut leo fermentum ornare. Praesent gravida venenatis felis sed egestas.</p>
</div>

<div class="clear"></div> <!-- Use this clear div to separate rows of content -->

<div class="col_3">
<h2>My Profile</h2>
</div>

<div class="col_3"> <!-- Examples of paragraphs with side images -->
<p>
<img src="http://buckysroom.com/photos/users/815/resized/4e5320a6a11bfc8e1cdb23526a72af7d.jpg" class="img_left whiteBorder" alt="" />
<a style="display:inline;font-weight:bold;color:white;">Bucky Roberts</a>
<a href="#">Read more...</a>
</p>
</div>

</div>
</li>
<!-- End 3 Columns Menu Item -->

<li><a href="#">Two Columns</a><!-- Begin 2 Columns Menu Item -->
<div class="two_column_layout"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Two Column Layout</h2>
</div>
<div class="col_1">
<p>This is a two columns example. Praesent gravida venenatis felis sed egestas.</p>
</div>
<div class="col_1">
<p>Duis sit amet erat enim. Sed ac tortor lobortis sem gravida consequat et vel mi venenatis.</p>
</div>
<div class="clear"></div>
<div class="col_2">
<p>Vivamus ut urna magna. Aenean vehicula feugiat leo, sit amet facilisis felis commodo a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet erat enim.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End 2 Columns Menu Item -->

<li>
<a href="#">Programs</a>
<ul class="dropup">
<li><a href="#">Calculator</a></li>
<li><a href="#">Group Chat</a></li>
<li><a href="#">Image Editor 2.0</a></li>
<li><a href="#">Meme Generator</a></li>
<li><a href="#">Private Messenger</a></li>
<li><a href="#">Text Editor</a></li>
</ul>
</li>

<li class="right"><a href="#" class="drop">Log Out</a>
</li>

</ul><!-- End Footer Menu -->

<ul id="notifications">
<li><a href="#" class="notificationIcons"><img src='img/twitter.png' alt="" /></a></li>
<li><a href="#" class="notificationIcons"><img src='img/rss.png' alt="" /></a></li>
<li>
<a href="#" class="notificationIcons"><img src='img/facebook.png' alt="" />
<span> <!-- The span is the text appearing on hover, use the notificationIcons class in the link -->
<img src="http://buckysroom.com/images/defaultProfileImage.png" style="float:left;width:24px;margin-right:5px;"/>
<div style="display:inline;color:#CC0000;font-weight:bold;">Emily May</div> liked your post "What is your favorite book of all time?"
<hr style="border:none;border-bottom:1px solid #777777;"/>
<img src="http://buckysroom.com/images/defaultProfileImage.png" style="float:left;width:24px;margin-right:5px;"/>
<div style="display:inline;color:#CC0000;font-weight:bold;">Emily May</div> liked your post "What is your favorite book of all time?"
<hr style="border:none;border-bottom:1px solid #777777;"/>
<img src="http://buckysroom.com/images/defaultProfileImage.png" style="float:left;width:24px;margin-right:5px;"/>
<div style="display:inline;color:#CC0000;font-weight:bold;">Emily May</div> liked your post "What is your favorite book of all time?"
</span>
</a>
</li>
</ul>

</div>
</body>
</html>

footer.css

body {
background:url("img/wood.jpg") repeat; /*repeated both vertically and horizontally*/
}
#footer{
position: fixed; /* the footer must stick to the bottom of the page, the fixed positionning is here necessary. */
bottom: 0px;
margin:0;
padding:0;
left:0;
right:0;
width: 100%;
height: 40px;
font-family:Arial;
text-shadow: 1px 1px 1px black; /*h,v,blur,color */
/* glass effect */
border-top: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.25);
/*inset = inner shadow ----------- this just creates multiple shadows*/
/*top border, top white section, overlay top white, bottom*/
box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#footer h2{
font-weight:normal;
font-size:14px;
text-decoration:underline;
color: #CC0000;
margin-top:10px;
margin-bottom:5px;
margin-left:10px;
}
#footer p{
color:white;
font-size:12px;
float:left;
padding:0px 10px; /*top & bottom = 0px */
margin:10px 0px;
}
#footer img{
border:none;
}
#footer li ul{ /* Programs button is a list */
list-style:none;
padding:0px;
margin-bottom:12px;
}
.clear { /* Use this class between rows of content when you use columns */
clear: both; /*no floating elements allowed on the left or the right side*/
display: block;
overflow: hidden;
visibility: hidden; /*nothing displays, just resets the layout*/
width: 0px;
height: 0px;
}
#footer .whiteBorder { /* good for images */
border:1px solid white;
}
#footer .img_left { /* image floats to the left */
float:left;
margin-right:10px;
width: 40px;
}
#footer .black_box {
background: rgba(0,0,0,0.4);
padding:5px;
margin-bottom:5px;
border-radius: 5px;
}
#footer #notifications { /* entire notification section */
float:right;
width:auto;
margin:5px 15px 0px; /*top, right/left, bottom*/
padding:0px;
overflow:hidden;
}
#footer #notifications li { /* each notification icon */
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
}
#footer #notifications li:hover {
margin-top:-1px; /* icons move 1px up on hover, use this or change color on hover (like home button) */
}
a.notificationIcons span { /* span is text when you hover over */
display:none;
font-size:12px;
padding:5px;
bottom:45px;
position:relative;
width:150px;
border-radius: 3px;
}
a.notificationIcons:hover span {
display:block;
position:absolute;
border:1px solid #161616;
color:white;
margin-left:-70px;
background:rgba(0,0,0,0.3);
}

/* Footer Buttons */

#footer_menu{ /*entire footer bar*/
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li { /* the "buttons" */
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
/* cool glass look */
border-right:1px solid rgba(0,0,0,0.4);
background: rgba(0,0,0,0.1);
}
#footer_menu li:hover {
background: rgba(0,0,0,0.3); /*a little darker on hover*/
}
#footer_menu li a { /*text on the buttons*/
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff; /*gray to white looks like it glows*/
}
/* used for the home button, text is here hidden and replaced by an image */
#footer_menu .homeButton {
padding:5px 8px 0px 14px;
border:none;
background:none;
}
#footer_menu .homeButton a { /* used for the home button, text is replaced by an image */
background:url("img/home.png") top left no-repeat;
width:36px;
height:30px;
}
#footer_menu li.homeButton:hover {
background:none;
}
#footer_menu li.homeButton a:hover {
background:url("img/home2.png") top left no-repeat;
}

/* Drop-Up Menus */

#footer_menu li ul.dropup{
display: none;
}
#footer_menu li:hover ul.dropup{ /*Programs menu*/
display: block;
position: absolute;
margin: 0 0 0 -15px; /*move left 15px to line up properly*/
bottom:40px; /* distance to the bottom of the browser */
border: 1px solid #111111;
border-bottom:none;
background: rgba(0,0,0,0.5);
border-radius: 7px 7px 0px 0px; /*top-left, top-right, bottom-right, bottom-left*/
}
#footer_menu li:hover li { /* items in Programs menu */
float: none;
background:none;
border:none;
border-bottom:1px solid #161616;
padding:12px 10px 12px 10px;
}
/* drop-up default links */
#footer_menu li:hover a {
color: #aaaaaa;
}
#footer_menu li:hover a:hover {
color: #eeeeee; /*lighter*/
}
/* Stream, Messages, etc... */
#footer_menu li:hover a.headerLinks {
font-size:14px;
text-decoration:underline;
color: #CC0000;
margin-top:10px;
margin-left:10px;
}
#footer_menu li:hover a.headerLinks:hover {
color: white;
cursor:pointer;
}
/* List Links */
#footer_menu li:hover a.listLinks {
font-size:12px;
color: #999999;
margin-left:10px;
}
#footer_menu li:hover a.listLinks:hover {
color: white;
cursor:pointer;
}
#footer_menu .right { /* Use the right class to push the content to the right */
float:right;
right:0px;
margin-right:2px;
border-right:none;
border-left:1px solid rgba(0,0,0,0.3);
}

/* 03 FOOTER - COLUMNS CONTENT - We will make 3 different layouts, which can contain 1 to 3 columns */

#footer .one_column_layout,
#footer .two_column_layout,
#footer .three_column_layout {
margin:4px auto;
position:absolute;
padding-bottom:15px;
display:none;
text-align:left;
}

/* Layout Sizes */
#footer .one_column_layout {width: 140px;}
#footer .two_column_layout {width: 280px;}
#footer .three_column_layout {width: 420px;}

/* Entire drop-up menu, show on mouse hover */
#footer_menu li:hover .one_column_layout,
#footer_menu li:hover .two_column_layout,
#footer_menu li:hover .three_column_layout {
display: block;
position: absolute;
margin: 0 0 0 -15px;
bottom:40px;
border: 1px solid #111111;
border-radius: 7px 7px 0px 0px;
background: rgba(0,0,0,0.5);
}

/* columns must be placed inside a layout */
#footer .col_1,
#footer .col_2,
#footer .col_3 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
#footer .col_1 {width:130px;}
#footer .col_2 {width:270px;}
#footer .col_3 {width:410px;}


There ya go. If you just wanna download it then..Click Here