How to fix a dropdown menu that extends past bottom of page - css

Question

I have a dropdown menu styled with css that can have an infinite number of items and levels. The issue I have after getting it to work is that large lists and multiple levels can cause the list to run off the page either at the bottom or too the right. Is there a way with css to determine that it has run off the page and then move the list so it remains visible? I looked at a few examples such as this one:
How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?
But I couldn't get it to work correctly with the css I had. That code is available here:
(Note there is a reference to jsfiddle dot net that this editor won't let me post so append the following to the jsfiddle dot net URL /petehelgren/SLyPL/22/
nav.medianav ul {
width:300px;
}
nav.medianav ul {
margin:0px;
padding:0px;
}
nav.medianav li {
list-style: none;
}
nav.medianav ul.top-level {
background:#efefef;
white-space:nowrap;
}
nav.medianav ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
nav.medianav a {
color: #000;
cursor: pointer;
display:block;
font-size: 16px;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration: none;
width:100%;
}
nav.medianav a:hover {
text-decoration: none;
color:#fff;
}
nav.medianav li:hover {
background: #fcaf17;
color:#fff;
position: relative;
}
nav.medianav ul.sub-level {
display: none;
}
nav.medianav li:hover > .sub-level {
background: #efefef;
color:#000;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 300px;
top: 5px;
}
nav.medianav ul.sub-level li {
border: none;
float:left;
width:300px;
}
Any suggestion for tweaks to get the menu to display even when it is too long or too nested?

Answer 1

You could use css3 columns, see fiddle: http://jsfiddle.net/SLyPL/23, older browsers may vary, see: http://caniuse.com/#search=columns
ul.sub-level{
-webkit-column-count: 2;
-webkit-column-gap: 15px;
-moz-column-count: 2;
-moz-column-gap: 15px;
column-count: 2;
column-gap: 15px;
}