If you click the gear on the JS tab you can include jQuery, then review your selectors:

  $('.sixteen columns responsive-footer mobile-show ul.menu > li > a')

Means all a that are direct childs of li, direct childs of ul.menu, descendants of mobile-show, descendants of responsive-footer, descendants of columns, descendants of .sixteen. This is not what you want since the sixteen columns responsive-footer mobile-show are classes on the same element. Use something like:

 $('.responsive-footer ul.menu > li > a')

If you remove unnecessary classes from the html I can help you more, they are kinda slapping me in the face when trying to figure them out :P

Remove the display: none; from .sub-menu li and hide the submenus using jQuery instead. That way if a user doesn't have javascript enabled the whole menu is still accessable.

$(function() {
  // hides all submenus
  $('.sub-menu').hide();

  var current = null;

  $('.menu > li > a').click(function(e) {
    if (current)
      current.slideUp();

    current = $(this).next('.sub-menu');
    current.stop().slideDown();

    e.preventDefault();
  });
});