CodePen

HTML

            
              <div class="header">
<!-- BEGIN HEADER NAVBAR -->
					<div class="header-nav clearer">
						<div style="float:left;"> <a id="navbtnhome" title="HOME" href="#" target="_self"><span>Home</span></a></div>
						<div style="float:left;"> <a id="navbtnaboutus" title="About Us" href="#" target="_self"><span>About Us</span></a></div>
						<div style="float:left;"> <a id="navbtnhowtobuy" title="How To Buy" href="#" target="_self"><span>How To Buy</span></a></div>
						<div style="float:left;"> <a id="navbtncontactus" title="Contact Us" href="#" target="_self"><span>Contact Us</span></a></div>
						<div style="float:left;"> <a id="navbtnjobopportunities" title="#" href="https://www.smythjewelers.com/apply/index.php?site=pandora" target="_blank"><span>Job Opportunities</span></a></div>
						<div style="float:left;margin:-1px -6px 0 38px;">  </div>
						<div style="float:left;margin:2px 0px 0px 0px;"> </div>
						<div id="facebook-menu">
							<div id="header-facebook-button"><a href="#">FB</a></div>
							<!--END:contact-tabs-->
							<div id="facebook-menu-content-wrap">
								<div id="facebook-menu-content">
									<div class="fb-menu-head-left clearer"><img src="skin/frontend/default/blankpan/images/hdr/icon-fp-36x36.jpg" width="36" height="36" alt="Facebook" /><h1>Find your favorite<br />
												location on Facebook</h1></div>
									<div class="fb-menu-head-right"><h2>Share your ideas and receive the latest PANDORA news!</h2></div>
									<ul class="clearer">
										<li class="fb-location"><strong>MARYLAND</strong><br />
										<a href="#" title="PANDORA Towson Town" target="_blank">Towson Town Center</a><br />
										<a href="#" title="PANDORA Annapolis Mall" target="_blank">Annapolis Mall</a></li>
										<li class="fb-location"><strong>VIRGINIA</strong><br />
										<a href="#" title="PANDORA Towson Town" target="_blank">Towson Town Center</a><br />
										<a href="#" title="PANDORA Annapolis Mall" target="_blank">Annapolis Mall</a></li>
										<li class="fb-location"><strong>NEW JERSEY</strong><br />
										<a href="#" title="PANDORA Towson Town" target="_blank">Towson Town Center</a><br />
										<a href="#" title="PANDORA Annapolis Mall" target="_blank">Annapolis Mall</a></li>
										<li class="fb-location"><strong>TEXAS</strong><br />
										<a href="#" title="PANDORA Towson Town" target="_blank">Towson Town Center</a><br />
										<a href="#" title="PANDORA Annapolis Mall" target="_blank">Annapolis Mall</a><br />
										<a href="#" title="PANDORA Towson Town" target="_blank">Towson Town Center</a></li>
										<li class="fb-location-last"><strong>MISSOURI</strong><br />
										<a href="#" title="PANDORA Towson Town" target="_blank">Towson Town Center</a><br />
										<a href="#" title="PANDORA Annapolis Mall" target="_blank">Annapolis Mall</a></li>
									</ul>
								</div>
								<!--END:contact-tab-call-us-->
							</div>
							<!--END:contact-tabs-content-wrap-->
						</div>
					</div>
					<!-- END HEADER NAVBAR -->
</div>
            
          
!

CSS

            
              /* Header NAV ======================================================================== */
.header div.header-nav {
     width:904px;
     height:30px;
     margin:12px 0px 0px 28px;
     background-color:#D0E9F9; 
}
#navbtnhome {
     display:block;
     width:89px;
     height:31px;
     margin-top:-1px;
     background:url("../images/hdr/110806_hdr_nav_home_ro.png") no-repeat 0 0; 
}
#navbtnhome:hover {
     background-position: 0 -31px; 
}
#navbtnhome span {
     display: none; 
}
#navbtnaboutus {
     display:block;
     width:95px;
     height:31px;
     margin-top:-1px;
     background:url("../images/hdr/110806_hdr_nav_aboutus_ro.png") no-repeat 0 0; 
}
#navbtnaboutus:hover {
     background-position: 0 -31px; 
}
#navbtnaboutus span {
     display: none; 
}
#navbtnhowtobuy {
     display:block;
     width:97px;
     height:31px;
     margin-top:-1px;
     background:url("../images/hdr/110806_hdr_nav_howtobuy_ro.png") no-repeat 0 0; 
}
#navbtnhowtobuy:hover {
     background-position: 0 -31px; 
}
#navbtnhowtobuy span {
     display: none; 
}
#navbtncontactus {
     display:block;
     width:103px;
     height:31px;
     margin-top:-1px;
     background:url("../images/hdr/110806_hdr_nav_contactus_ro.png") no-repeat 0 0; 
}
#navbtncontactus:hover {
     background-position: 0 -31px; 
}
#navbtncontactus span {
     display: none; 
}
#navbtnjobopportunities {
     display:block;
     width:134px;
     height:31px;
     margin-top:-1px;
     background:url("../images/hdr/110806_hdr_nav_jobopportuni.png") no-repeat 0 0; 
}
#navbtnjobopportunities:hover {
     background-position: 0 -31px; 
}
#navbtnjobopportunities span {
     display: none; 
}
/*------------FACEBOOK----------*/
.header #facebook-menu {
     display: block;
     width: 25px;
     margin: 2px 25px 0 0;
     float: right;
     overflow: visible; 
}
.header #header-facebook-button {
     width: 25x;
     height: 26px;
     display: block; 
}
.header #header-facebook-button a {
     display: block;
     width: 25px;
     height: 26px;
     background-image: url(../images/hdr/110806_fb_logo_btn.png);
     background-repeat: no-repeat;
}
.header #facebook-menu-content-wrap {
     position:relative; 
}
.header #facebook-menu-content-wrap > div {
     display:none; 
}
.header #facebook-menu-content {
     background-color: #D0E9F9;
     padding: 15px;
     position:absolute;
     top: 2px;
     right: 0px;
     z-index: +1000;
     -webkit-border-radius: 0px 0px 16px 16px;
     border-radius: 0px 0px 16px 16px; 
}
.header #facebook-menu-content ul {
     width: 720px;
     text-align: left; 
}
.header #facebook-menu-content img {
     display: block;
     width: 36px;
     height: 36px;
     padding: 0 6px 0 0 ;
     float: left; 
}
.header #facebook-menu-content h1 {
     color: #32446e;
     font-weight: bold;
     font-size: 14px;
     line-height: 16px;
     display: table-cell;
     vertical-align: middle;
     float: left; 
}
.header #facebook-menu-content h2 {
     color: #960201;
     font-size: 14px;
     line-height: 16px;
     display: table-cell;
     vertical-align: middle; 
}
.header #facebook-menu-content ul li,
.header #facebook-menu-content ul li a,
.header #facebook-menu-content ul li a:link,
.header #facebook-menu-content ul li a:visited {
     color: #666; 
}
.header #facebook-menu-content ul li a:hover,
.header #facebook-menu-content ul li a:focus {
     color: #06c; 
}
.header #facebook-menu-content ul li a:active {
     color: #960201; 
}
.header #facebook-menu-content ul li.fb-location {
     display: block;
     padding: 0 8px 0 0;
     margin:16px 8px 0 0;
     width:18%;
     border-right: 1px #ffffff solid;
     vertical-align: top;
     float: left;
     min-height:75px; 
}
.header #facebook-menu-content ul li.fb-location-last {
     display: block;
     padding: 0;
     margin:16px 0 0 0;
     width:18%;
     border-right: 0px #ffffff none;
     vertical-align: top;
     float: left;
     min-height:75px; 
}
.header #facebook-menu-content div.fb-menu-head-left,
.header #facebook-menu-content div.fb-menu-head-right {
     height: 36px;
     float: left;
     display: table; 
}
.header #facebook-menu-content div.fb-menu-head-left {
     width: 33%; 
}
.header #facebook-menu-content div.fb-menu-head-right { 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {
  $('#header-facebook-button > a').hover(function() {
    var hovered = $(this).index();
    var slideDiv = $('#facebook-menu-content-wrap > div').eq(hovered);
    slideDiv.slideToggle(400);
  }, function() {
    var hovered = $(this).index();
    var slideDiv = $('#facebook-menu-content-wrap > div').eq(hovered);
    slideDiv.slideUp(400);
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................