Ability to scrolling thru menu dropdown list in ASPX masterpage - asp.net

Question

I have created my first master page so bear with me if this is a dumb question. One of my menu drop down lists within the master page is longer than the viewable page, so some of the items in the drop down list are cut off at the bottom of the page. How can I make the drop down list have the ability to scroll through it so I can see the entire list.
nav{
top:0;
left:0;
position:fixed;
width:100%;
background-color:rgba(0,0,0,0.6);
}
nav ul{
float:left;
padding:0;
margin:0;
position:relative;
list-style:none;
}
nav ul li{
display:inline-block;
float:left;
position:relative;
}
nav a{
display:block;
padding:3px 10px;
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;
position:absolute;
width:450px;
top:26px;
}
nav ul li:hover>ul{
display:inherit;
}
nav ul ul li{
float:none;
display:list-item;
position:relative;
background-color:rgba(0,0,0,0.6);
}
nav ul ul ul li{
position:relative;
left:450px;
top:-26px;
}
.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;
position:static;
}
nav ul ul ul{
float:none;
position:absolute;
}
}

Answer 1

One option would be to set via CSS a maximum height of the container (max-height : number [%, PX, VH] ) of dropdown and specify an overflow / scrolling (overflow-y : [ scroll|auto ] )to get to the bottom of the items. For example:
.nav ul { max-height:100%; overflow-y: auto; }
You can adjust Max-Height with %, PX, VH .. or whatever suites your specific project's use case.
Another option could be to introduce Columns in the dropdown as described here:
How to fix a dropdown menu that extends past bottom of page

Answer 2

I figured it out. To have a scroll bar in the sub menu drop list I needed to add nav ul ul ul and alter the nav ul ul ul li see below;
top: 0;
left: 0;
position: fixed;
width: 100%;
background-color: rgba(0,0,0,0.6);
}
nav ul {
float: left;
padding: 0;
margin: 0;
position: relative;
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
position: relative;
}
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;
position: absolute;
width: 300px;
top: 26px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
float: none;
display: list-item;
position: relative;
background-color: rgba(0,0,0,0.6);
}
nav ul ul ul {
display: none;
position: absolute;
left: 300px;
top: 0px;
max-height: 1000%;
overflow-y: auto;
}
nav ul ul ul li {
float: none;
display: list-item;
position: relative;
}
.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;
position: static;
}
nav ul ul ul {
float: none;
position: absolute;
}
}```