CodePen

HTML

            
              	<div id="horiznav">
<ul>
<li><a href="index.html">Home</a></li>
<li "><a href="aboutus.html">About Us</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="shows.html">Shows</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul></div>
            
          
!
via HTML Inspector

CSS

            
              #hiddencontent {
	position: absolute;
	width: 1450px;
	top: 541px;
	background-color: #DDD;
	height: 200px;
	padding-top: 5px;
	left: 0px;
	overflow: auto;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 15px;
	display: none;
}
.hiddencontenttext {
	font-family: Verdana, Geneva, sans-serif;
	overflow: auto;
	font-size: 14px;
	line-height: 24px;
	color: #000;
}
.fanquotes {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-style: italic;
}
.pageheaders {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	color: #FFFFFF;
	font-weight: bolder;
	line-height: 52px;
}
.hiddencontenttext a:link {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
	text-decoration: none;
}
.hiddencontenttext a:visited {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-decoration: none;
	color: #000;
}
.hiddencontenttext a:hover {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-decoration: none;
	color: #FF0;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">
  $(document).ready(function() {
							 
$("#hiddencontent").hide();

$("horiznav a").click(function(e){
  e.preventDefault();
  $($(this).attr("href")).slideToggle();
}); // end slide toggle


}); // end document ready
  </script>
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................