CodePen

HTML

            
               <div id="main-nav">
        	<ul><li class="page_item page-item-6"><a href="#">Branding</a></li>
<li class="page_item page-item-9"><a href="#">Services</a>
<ul class='children'>
	<li class="page_item page-item-19"><a href="#">Advertising</a></li>
	<li class="page_item page-item-21"><a href="#">PR</a></li>
	<li class="page_item page-item-23"><a href="#">Online</a></li>
	<li class="page_item page-item-25"><a href="#">Social Media</a></li>
	<li class="page_item page-item-27"><a href="#">Events</a></li>
	<li class="page_item page-item-29"><a href="#">Convention</a></li>
</ul>
</li>
<li class="page_item page-item-11"><a href="#">Results</a>
<ul class='children'>
	<li class="page_item page-item-39"><a href="#">Portfolio</a></li>
</ul>
</li>
<li class="page_item page-item-14"><a href="#">About</a>
<ul class='children'>
	<li class="page_item page-item-31"><a href="#">Back Story</a></li>
	<li class="page_item page-item-33"><a href="#">Team</a></li>
	<li class="page_item page-item-35"><a href="#">Careers</a></li>
	<li class="page_item page-item-37"><a href="#">Blog</a></li>
</ul>
</li>
<li class="page_item page-item-16"><a href="#">Contact</a></li>
</ul>
        </div>
            
          
!
via HTML Inspector

CSS

            
              #main-nav {
	width: 500px;
	height: 120px;
	z-index: 99;
	float: right;
	margin: 0px 0 0 0;
}	

#main-nav ul { margin:0; padding:0; list-style:none; height: 20px; margin:0; }
#main-nav ul li { 
	display: inline; 
	float:left; 
	position:relative;
 }
#main-nav ul li a {
	color: white;
	font: normal 16px "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	padding: 49px 30px 50px 9px;
	display: block;
	text-decoration: none;
	outline: none;
	background: #686765; 
	text-transform:lowercase;
	letter-spacing:-1px;
	border-left: 1px solid #bfbfbf;
	-webkit-transition:All .5s ease;
	-moz-transition:All .5s ease;
	-o-transition:All .5s ease;
	width: 50px;
}

#main-nav ul li.page-item-16 a {
    border-right: 1px solid #bfbfbf;
}

#main-nav ul li.page-item-14:hover a { /*About Hover*/
    background:  #8cbc46;
}

#main-nav ul li.page-item-14 ul.children li a {
	background: #a9d963;
}

#main-nav ul li.page-item-14 ul.children li a:hover {
	background: #8cbc46;
}

#main-nav ul li.page-item-11:hover a { /*Results Hover*/
    background: #2ca7e1;
}

#main-nav ul li.page-item-11 ul.children li a {
	background: #55c3ff;
}

#main-nav ul li.page-item-11 ul.children li a:hover {
	background: #2ca7e1
	;
}

#main-nav ul li.page-item-16:hover a { /*Contact Hover*/
    background:  #d8592f;
}

#main-nav ul li.page-item-9:hover a { /*Services Hover*/
    background: #d72f81;
}

#main-nav ul li.page-item-9 ul.children li a {
	background: #f35099;
}

#main-nav ul li.page-item-9 ul.children li a:hover {
	background: #d72f81;
}

#main-nav ul li.page-item-6:hover a { /*Branding Hover*/
    background: #9663ad;
}

#main-nav ul li a:hover, #main-nav ul li.current_page_item ul.children li a:hover, #main-nav ul li ul.children li a:hover, #main-nav ul li.current_page_parent a:hover, #main-nav ul li.current_page_parent ul.children li a:hover {
	color: white;
}

#main-nav ul li.current_page_item a, #main-nav ul li.current_page_parent a, #main-nav ul li.current_page_ancestor a,  #main-nav ul li.current_page_parent ul.children li.current_page_item a {
	color: white;
}	

#main-nav ul li.current_page_item ul.children li a, #main-nav ul li.current_page_parent ul li.current_page_item a, #main-nav ul li.current_page_parent ul.children li a {
	color: #FFF;
}

#main-nav ul ul {
	position:absolute;
	left:-999em;
	top:120px;
	width:193px;
	padding-bottom: 10px;
	height: auto;
	display: block;
	margin:0 0 0 -40px;
	z-index: 100;
	}
#main-nav li:hover ul,#main-nav li.sfhover ul {
	left:auto;
	}
#main-nav ul ul li {
	letter-spacing:0px;
	color:#444444;
	z-index:20;
	margin:0;
	}
#main-nav ul ul li a {
	width:120px;
	display: block;
	color:white;
	text-decoration:none;
	font: normal 13px "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	text-align: left;
	margin: 0;
	padding: 4px 5px;	
	font-weight: bold;
	text-transform:capitalize;
	background: #35342f;
	}

#main-nav ul ul ul li a { display: none; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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