CodePen

HTML

            
               <div id="main-nav">
          <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-521" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-521"><a href="/consumer-packages-goods">Specialties</a>
<ul class="sub-menu">
	<li id="menu-item-564" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-564"><a href="http://www.mcfaddengavender.net/newmg/specialties/consumer-packaged-goods/" >Consumer Packaged Goods</a></li>
	<li id="menu-item-563" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-563"><a href="http://www.mcfaddengavender.net/newmg/specialties/grocery-stores/" >Grocery Stores</a></li>
	<li id="menu-item-562" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-562"><a href="http://www.mcfaddengavender.net/newmg/specialties/resorts-hospitality/" >Resorts + Hospitality</a></li>
	<li id="menu-item-561" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-561"><a href="http://www.mcfaddengavender.net/newmg/specialties/education/" >Education</a></li>
	<li id="menu-item-560" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-560"><a href="http://www.mcfaddengavender.net/newmg/specialties/new-product-development/" >New Product Development</a></li>
</ul>
</li>
<li id="menu-item-522" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-522"><a href="http://www.mcfaddengavender.net/newmg/services/" >Services</a>
<ul class="sub-menu">
	<li id="menu-item-523" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-523"><a href="http://www.mcfaddengavender.net/newmg/services/advertising/" >Advertising</a></li>
	<li id="menu-item-538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-538"><a href="http://www.mcfaddengavender.net/newmg/services/branding/" >Branding</a></li>
	<li id="menu-item-524" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-524"><a href="http://www.mcfaddengavender.net/newmg/services/pr/" >PR</a></li>
	<li id="menu-item-525" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-525"><a href="http://www.mcfaddengavender.net/newmg/services/online/" >Online</a></li>
	<li id="menu-item-526" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-526"><a href="http://www.mcfaddengavender.net/newmg/services/social-media/" >Social Media</a></li>
	<li id="menu-item-527" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-527"><a href="http://www.mcfaddengavender.net/newmg/services/events/" >Events</a></li>
	<li id="menu-item-528" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-528"><a href="http://www.mcfaddengavender.net/newmg/services/conventions/" >Conventions</a></li>
</ul>
</li>
<li id="menu-item-529" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-529"><a href="http://www.mcfaddengavender.net/newmg/results/creative/" >Results</a></li>
<li id="menu-item-530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-530"><a href="http://www.mcfaddengavender.net/newmg/who-we-are/" >About</a>
<ul class="sub-menu">
	<li id="menu-item-531" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-531"><a href="http://www.mcfaddengavender.net/newmg/about/who-we-are/" >Who We Are</a></li>
	<li id="menu-item-532" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-532"><a href="http://www.mcfaddengavender.net/newmg/about/how-we-work/" >How We Work</a></li>
	<li id="menu-item-533" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-533"><a href="http://www.mcfaddengavender.net/newmg/about/blog/" >Blog</a></li>
</ul>
</li>
<li id="menu-item-534" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-534"><a href="http://www.mcfaddengavender.net/newmg/contact/" >Contact</a>
<ul class="sub-menu">
	<li id="menu-item-535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-535"><a href="http://www.mcfaddengavender.net/newmg/contact/careers/" >Careers</a></li>
</ul>
</li>
</ul></div>   
            
          
!
via HTML Inspector

CSS

            
              #main-nav_responsive {
  display: none;
}



#main-nav {
	width: 500px;
	height: 120px;
	z-index: 99;
	float: right;
	margin: 0px 0 0 0;
	background: none repeat scroll 0 0 #686765;
	border-right: 1px solid #bfbfbf;
}	

#main-nav ul { margin:0; padding:0; list-style:none; height: 5px; 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 .menu-item-534.current_page_parent a {
	background: #d8592f;	
	}
 
 
#main-nav ul li.menu-item-534 a {
    border-right: 1px solid #bfbfbf;
}

#main-nav ul li.menu-item-530:hover a, #main-nav .menu-item-530.current_page_item a { /*About Hover*/
    background:  #8cbc46;
}

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

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

#main-nav ul li.menu-item-529:hover a, #main-nav .menu-item-529.current_page_item a { /*Results Hover*/
    background: #2ca7e1;
}

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

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

#main-nav ul li.menu-item-534:hover a, #main-nav .menu-item-534.current_page_item a { /*Contact Hover*/
    background:  #d8592f;
}

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

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

#main-nav ul li.menu-item-522 ul.children li a:hover, #main-nav .menu-item-522.current_page_item a {
	background: #d72f81;
}

#main-nav ul li.menu-item-521:hover a, #main-nav .menu-item-521.current_page_item 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:118px;
	width:193px;
	padding-bottom: 10px;
	height: auto;
	display: block;
	margin:0 0 0 -40px;
	z-index: 10000;
  opacity: 0;      /* Hide sub level, we will use this in transition */
    -webkit-transition: opacity .6s ease-in-out; /* For chrome & safari */
    -moz-transition: opacity .6s ease-in-out; /* For mozilla firefox */
    -o-transition: opacity .6s ease-in-out; /* For opera */
        transition: opacity .6s ease-in-out; /* Not yet implemented, but will be available soon */
	}

#main-nav ul li:hover>ul{ opacity: 1; position:absolute; left:0; }
  
#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;
	border-left: none;
	}

#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 ..................