Make menu scrollable on smaller screen - html

Question

My menu is using a series of nested <ul> tags with sub <ul> and <li> within existing <li> calls. This is pretty standard for most menu's are far as I am aware. To make my website work well on mobile devices, I have decided to take a more responsive design approach and use #media query's to show or hide content as the browser is resized.
When my menu is shrunk down, the drop downs are hidden (for now). I will most likely introduce a hamburger type menu later on where you can click on a + icon beside the menu on the mobile version and see it's sub links.
As of right now, when the browser is resized the menu is then ordered as an absolute display and this disables the scrolling on the menu. If a user, say on an iPhone, turns the phone sideways, the menu is then cut off and they cannot scroll down to see the rest of the menu in this orientation. Here is an image to depict the issue:
And here is an example of the nested html code:
<div id="navmenu">
<ul>
<li><div class="home"></div></li>
<li class='storelink dropdown'><a class='dropbtn' href='/store'>Store</a>
<div class='dropdown-content'>
<a href='/store?group=1'>All Items</a>
</div>
</li>
<li class='cartmenu'><a href='/cart'>Cart</a></li>
<li class='accountmenu dropdown'><a class='dropbtn' href='/account'>Account</a>
<div class='dropdown-content'>
<a href='/account'>Customer login</a>
</div>
</li>
<li><a href='/services'>Services</a></li>
</ul>
</div>
and finally the relevant css
#navmenu .dropdown:hover .dropdown-content {
display: block;
position: absolute;
}
#navmenu {
overflow-y: scroll;
display: none;
clear: both;
background: #333;
left: 0;
position: absolute;
float: none;
margin: 0;
padding: 0;
width: 100%;
border-bottom: 2px solid #fff;
}
#navmenu ul {
width: 100%;
text-align: center;
}
#navmenu li {
float: none;
clear: both;
background: #333;
width: 100%;
text-align: center;
}
#navmenu li a {
display: block;
width: 100%;
clear: both;
margin: 0;
padding: 10px 0;
}
Why won't this scroll when resized? Thanks

Answer 1

Try adding this:
#navmenu {
height: 100%;
...
}

Answer 2

Hmm, you can try giving your #navmenu a fixed height.
Alternatively, you can try setting #navmenu to position:fixed (not absolute) and height:100%.