Currently, I have my mobile navigation set up to create a dropdown function. You can see a working example here (just pull you browser small to see the mobile nav):
http://goo.gl/TzPPd

The problem is that the jQuery drop down effects are also being applied to the non-mobile navigation, which is causing some issues. I want the jQuery effects to only work on the mobile navigation, here is the code I'm currently using:

Code:
    $(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();
      });
    });
I tried this, but had no luck:

Code:
    $(function() {
      $('#main-nav_responsive > ul.menu > li > a').click(function(e) {
        $('#main-nav_responsive > ul.sub-menu').slideUp('normal');
          if($(this).next('#main-nav_responsive > ul.sub-menu').is(':hidden') === true) {    
            $(this).next('#main-nav_responsive > ul.sub-menu').slideDown('normal');
          }
        e.preventDefault();
      });
    });
Anyone know how to make the jQuery effects only apply to the mobile navigation?