CodePen

HTML

            
              <div class="container footer-nav">
<a name="responsive-footer"></a> 
	<div class="sixteen columns responsive-footer mobile-show">
		<div class="menu-mobile-nav-container"><ul class="menu" id="menu-mobile-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom"><a>About</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Stevia</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">FAQ’s</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom"><a>Products</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">All Products</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="#">Drops</a></li>
</ul>
</li>
</ul>
</div>
            
          
!

CSS

            
              ul {
    list-style: none outside none;
}

#menu-footer-menu li {
    float: none;
}

	.sub-menu {
    margin-left: 0px;
}

	.sub-menu li {
    float: none !important;
     display: none;
}

	.sub-menu ul ul {
    margin: 4px 0 5px 0px !important;
}

	#menu-footer-menu li {
    float: left;
    margin-right: 7%;
}

	.menu-footer-menu-container {
    margin-left: 0%;
}

	#menu-footer-menu li a {
    color: #009240 !important;
    font-size: 20px;
    text-transform: uppercase;
}

	#menu-footer-menu .sub-menu li a {
    color: #B0B0B0 !important;
    font-size: 12px;
}

	.container.footer-nav {
    background: none repeat scroll 0 0 #4C8F56;
    border: 10px solid #4C8F56;
    color: white;
}

	.container.footer-nav a {
    color: white !important;
}

	.sixteen.columns.responsive-footer.mobile-show li {
    background: #3E8148;
    margin-bottom: 0px;
    padding: 8px !important;
    margin: 2px;
}

	.sixteen.columns.responsive-footer.mobile-show li a {
    padding: 10px;
    font-size: 20px;
    font-family: "nexa_boldregular";
}

	.sixteen.columns.responsive-footer.mobile-show .sub-menu li {
    background: none repeat scroll 0 0 white !important;
}

	.sixteen.columns.responsive-footer.mobile-show .sub-menu li a {
    color: #2A6D34 !important;
    font-family: "nexa_lightregular";
}

	#menu-footer-menu-2 {
    margin: 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function() {
  $('.responsive-footer ul.menu > li > a').click(function(e) {
    $('.responsive-footer ul.menu > li > a').slideUp('normal');
      if($(this).next('.responsive-footer ul.menu > sub-menu').is(':hidden') === true) {    
        $(this).next('.responsive-footer ul.menu > sub-menu').slideDown('normal');
      }
    e.preventDefault();
  });
}); 
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................