overflow: scroll affecting drop down menu on iOS - html

Question

I'm currently building a website using only HTML/CSS3. It displays perfectly on all desktop browsers but not in mobile Safari (which is crucial). The site is currently under construction here: test.scccjapan.com and the problem is with the drop down navigation menu ("blackboard - grammar - verbs" list).
The list is particularly long, but when scrolling down the page to get to the bottom of the list, the menu closes making it impossible to click on any of the links.
After a lot of trial and error, I seem to have narrowed the problem down to the overflow:scroll attribute. If I delete this attribute from the CSS, the menu works perfectly fine, HOWEVER, I also have a fixed background image and deleting the overflow turns the background image from a fixed state into something more like a scroll which is also not what I'm looking for. It seems I can either have:
(a) a fully-functioning menu and a scrolling (static) background or
(b) a fixed background and a "broken" menu.
Short of redesigning this section of my site to cater for this issue, can anyone help!? I don't know Java and a relative noob when it comes to coding so specific information would be useful. I've also scoured the internet for answers and tried anything I could find but to no avail.
Thanks in advance! :)
Here's my CSS (let me know if you need something more):
html {
background: url(Backgrounds/Totoro.png);
background-position: bottom right;
background-repeat: no-repeat;
background-size: 40%;
background-attachment: fixed;
background-color: #666;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
-webkit-overflow-scrolling: touch;
min-width: 900px;
max-width: 100%;
position: relative;
overflow-x: hidden;
overflow-y: scroll;
}
#Menu {
text-align: center;
white-space: normal;
font-size: 15px;
font-weight: bold;
}
/* Main Menu */
#Menu nav ul {
padding: 0 10px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-align: left;
text-shadow: 0px 1px 1px #fff;
z-index: 99;
-webkit-transform: translateZ(0);
}
#Menu nav img {
height: 65px;
width: 65px;
}
#Menu nav ul li a:hover {
color: #4ed1fe;
background: #bfbebe;
}
#Menu nav ul:after {
content: "";
clear: both;
display: block;
}
#Menu nav ul li {
float: left;
}
#Menu nav ul li:hover {
background-color: #383838;
box-shadow: inset 0px 0px 2px 2px #535353;
}
#Menu nav ul li a {
display: block;
padding: 10px 6px;
color: #262626;
text-decoration: none;
}
#Menu nav ul li:hover a {
cursor: pointer;
color: #fff;
text-outline: #000;
text-shadow: 2px 0px 5px #000;
}
/* Year Levels */
#Menu nav ul ul {
background: #5d5d5d;
border-radius: 1px;
position: absolute;
top: 100%;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom: #9ca7b5 1px solid;
display: none;
box-shadow: 2px 0px 5px #000;
}
#Menu nav ul ul li {
float: none;
position: relative;
}
#Menu nav ul ul li a {
padding: 10px 80px 10px 10px;
color: #fff;
border-top: #fff 0px inset;
}
#Menu nav ul ul li a:hover {
color: #0CF;
background: #bfbebe;
}
#Menu nav ul li:hover > ul {
display: block;
}
/* Terms */
#Menu nav ul ul ul {
position: absolute;
left: 90%;
box-shadow: 0px -3px 100px #000;
top: 10px;
white-space: nowrap;
}