Is there a way to verticle scroll the mobile dropdown menu if it's larger than the screen?

[imgrooot]

Right now I have a mobile dropdown that works fine.  The only issue I have is that when viewing it on my smartphone, the dropdown gets cut off at the bottom and I am unable to scroll it down to rest of it.  Is there a way to fix it so that It's scrollable?

 

Here's my js code of the dropdown.

$(document).ready(function() {
	$(".nav-mobile li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent-arrow");
		}
	})

	$(".toggle-mobile-menu").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active-mobile");
		$(".nav-mobile").toggle();
	});

	adjustMenu();
});

$(window).bind('resize orientationchange', function() {
	ww = document.body.clientWidth;
	adjustMenu();
});

var adjustMenu = function() {
	var ww = document.body.clientWidth;
	if (ww <= 850) {
		$(".toggle-mobile-menu").css("display", "block");
		if (!$(".toggle-mobile-menu").hasClass("active-mobile")) {
			$(".nav-mobile").hide();
		} else {
			$(".nav-mobile").show();
		}
		$(".nav-mobile li").unbind('mouseenter mouseleave');
		$(".nav-mobile li a.parent-arrow").unbind('click').bind('click', function(e) {
			// must be attached to anchor element to prevent bubbling
			e.preventDefault();
			$(this).parent("li").toggleClass("hover");
		});
	}
	else if (ww > 850) {
		$(".toggle-mobile-menu").css("display", "none");
		$(".nav-mobile").hide();
		$(".nav-mobile li").removeClass("hover");
		$(".nav-mobile li a").unbind('click');
		$(".nav-mobile li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		 	// must be attached to li so that mouseleave is not triggered when hover over submenu
		 	$(this).toggleClass('hover');
		});
	}
}

[Zane]

Care to provide a link to the a working application.  Otherwise, we can only take shots in the dark.  At least provide a screenshot and/or CSS, because this is probably more of a CSS problem than a JS problem.

[imgrooot]

Care to provide a link to the a working application.  Otherwise, we can only take shots in the dark.  At least provide a screenshot and/or CSS, because this is probably more of a CSS problem than a JS problem.

 

I have it working now. And yes it is a CSS problem. Here's the css code. Note that "Overflow-y" will only work if the position is defined.  Without the "position:fixed", my nav-mobile dropdown didn't open when I clicked toggle.

.nav-mobile {
  display: none;
  *zoom: 1;
  position: fixed;
  width: 100%;

  overflow-y: scroll;
  -ms-overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}

[imgrooot]

 

I have it working now. And yes it is a CSS problem. Here's the css code. Note that "Overflow-y" will only work if the position is defined.  Without the "position:fixed", my nav-mobile dropdown didn't open when I clicked toggle.

.nav-mobile {
  display: none;
  *zoom: 1;
  position: fixed;
  width: 100%;

  overflow-y: scroll;
  -ms-overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}

 

One small edit. Add the height: 100%. It'll fix any y scrolling issue.  Here's the updated code.

.nav-mobile {
  display: none;
  height: 100%;
  *zoom: 1;
  position: fixed;
  width: 100%;

  overflow-y: scroll;
  -ms-overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}