Css 如何修复超出页面底部的下拉菜单

我有一个css样式的下拉菜单，可以有无限多的项目和级别。我在使用它之后遇到的问题是，大型列表和多个级别可能会导致列表在页面底部或太右。css有没有办法确定它已经离开页面，然后移动列表使其保持可见？我看了一些例子，例如：

但我无法让它与我拥有的css一起正常工作。该代码可在以下位置获得： （注意，这里有一个对jsfiddle.net的引用，这个编辑器不允许我发布，所以将以下内容附加到jsfiddle.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;
}

---

是否有任何调整建议，以便在菜单太长或太嵌套时也能显示它？

您可以使用css3列，请参阅fiddle:，较旧的浏览器可能会有所不同，请参阅：

---

这是你的小提琴链接：当你说“离开页面”您是否在容器外部？是的。容器外部是准确的。我希望有一种方法可以将项目位置移回容器中。如果您的鼠标上有滚轮，则可以使用滚轮，但尽管当项目超出容器边界时会显示滚动条，但无法使用滚动条滚动到项目ut是一个带滚轮的鼠标。这里有一些额外的信息：我添加了一些JavaScript，当用户向下移动靠近底部的列表时，会自动滚动页面，但现在自动滚动会将鼠标从列表上移开，因为鼠标被触发悬停，所以会消失。你可以在这里看到这种效果：因此，也许我需要一个在屏幕上展开的列表单击而不是悬停？Javascript不允许我控制鼠标光标的位置。我不确定这会给我带来多少好处（看小提琴）。在“研讨会培训视频”下面的列表中还有15个项目超出了容器。列表底部的“说教目标01”下面有15个项目没有显示。

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; 
}