CodePen

HTML

            
              <div id="main-nav_responsive">
  <div>
    <ul class="menu">
      <li>
        <a href="#">Specialties</a> 
          <ul class="sub-menu">
            <li><a href="#" >Consumer Packaged Goods</a></li>
            <li><a href="#" >Grocery Stores</a></li>
            <li><a href="#" >Resorts + Hospitality</a></li>
            <li><a href="#" >Education</a></li>
            <li><a href="#" >New Product Development</a></li>
          </ul>
        </li>
              
              
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-522"><a href="#" >Services</a>
<ul class="sub-menu">
    
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-523"><a href="#" >Advertising</a></li>
    
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-538"><a href="#" >Branding</a></li>
    
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-524"><a href="#" >PR</a></li>
    
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-525"><a href="#" >Online</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-527"><a href="#" >Events</a></li>
</ul>
</li>
              
              
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-643"><a href="#" >Results</a></li>
              
              
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-645"><a href="#" >About</a>
    
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-531"><a href="#" >Who We Are</a></li>
    
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-532"><a href="#" >How We Work</a></li>
    
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-533"><a href="#" >Blog</a></li>
</ul>
</li>
              
              
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-534"><a href="#" >Contact</a>
<ul class="sub-menu">
    
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-535"><a href="#" >Careers</a></li>
</ul>
</li>
</ul>
</div>
            
          
!
via HTML Inspector

CSS

            
              #main-nav_responsive {
    display:block;
    z-index: 99;
    margin: 0 auto;
    width: 95%;
}
    
#main-nav_responsive li {
    list-style:none;
    margin: 0 auto;
    padding-top: 2px;
}

#main-nav_responsive ul {
    padding: 0px;
    height: auto;
    z-index: 10000;
}
    
#main-nav_responsive ul li a {
    display: block;
    color:white;
    text-decoration:none;
    font: normal 18px "Century Gothic", sans-serif;
    text-align: left;
    margin: 0;
    text-transform:capitalize;
    background: #ED1C3F;
    padding: 9px 0px 11px 20px;
    text-transform:lowercase;
}

#main-nav_responsive ul li a:hover {
    background:#E35959;
}

#main-nav_responsive .sub-menu li a {
    background: #35342f;
}

ul.sub-menu {
    display:none;
}

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

JS

            
              /*
*  $(document).ready(function() { });
*  is the same as
*  $(function() { });
*/

$(function() {
  $('ul.menu > li > a').click(function(e) {
    $('ul.sub-menu').slideUp('normal');
      if($(this).next('ul.sub-menu').is(':hidden') === true) {    
        $(this).next('ul.sub-menu').slideDown('normal');
      }
    e.preventDefault();
  });
});


/*
 *  Page reference: http://css-tricks.com/forums/discussion/20608/mobile-navigation-dropdown#Item_10
 */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................