Add scroll bar to masterpage menu lists

[wgraulich]

I have created a masterpage with dropdown menu lists. Each list have sub menu lists to open to the right of the main menu list. Some of these list are longer then the webpage so they get cutoff on the bottom of the page. I am trying to add scroll bars to each menu list (see below codes). When I add the overflow-y to each ul on the css page it prevents the sub menus from appearing to the right. How can I have both the main menu dropdown list and sub menu list both be seen and have the ability to scroll thru them both.

css code:

av {
top: 0;
left: 0;

;
width: 100%;
background-color: rgba(0,0,0,0.6);
}

nav ul {
float: left;
padding: 0;
margin: 0;
;
list-style: none;

}

nav ul li {
display: inline-block;
float: left;
;
}

nav a {
display: block;
padding: 3px 15px;
color: white;
font-size: 17px;
font-weight: bold;
text-decoration: none;
font-family: Arial;
}

nav a:hover {
background-color: white;
color: gray;
}

nav ul ul {
display: none;
;
width: 300px;
top: 26px;
max-height: 2000%; overflow-y: auto;
}

nav ul li:hover > ul {
display: inherit;
}

nav ul ul li {
float: none;
display: list-item;
;
background-color: rgba(0,0,0,0.6);
}


nav ul ul ul li {
;
left: 300px;
top: -26px;
max-height:100%; overflow: auto;
}

.toggle, [id^=drop] {
display: none;
}

@media all and (max-width:600px) {
.menu {
display: none;
}

.toggle {
display: block;
color: white;
background-color: rgba(0,0,0,0.6);
text-decoration: none;
padding: 20px;
}

.toggle:hover {
background-color: white;
color: dimgray;
}

#logo {
display: block;
float: none;
}

[id^=drop]:checked + ul {
display: block;
}

nav ul li {
display: block;
width: 100%
}

nav ul ul {
float: none;
;
}

nav ul ul ul {
float: none;
;
}
}

when NOT using the overflow code I see the sub menu (see pic 1)



when using the overflow code I am unable to see the sub menu (see pic 2)

Continue reading...