如何修复超出页面底部的下拉菜单 [英] How to fix a dropdown menu that extends past bottom of page

问题描述

我有一个样式为css的下拉菜单，其中可以包含无限数量的项目和级别.使它正常工作后，我遇到的问题是，较大的列表和多个级别可能会导致列表从页面底部或右侧流出.css是否有办法确定它已离开页面，然后移动列表，使其保持可见状态?我看了一些这样的例子:

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:

如何避免垂直下拉菜单在底部时添加垂直滚动条?

但是我无法使其与我的CSS一起正常工作.该代码在这里可用:(请注意，此编辑器不允许我发布对jsfiddle点网的引用，因此请将以下内容附加到jsfiddle点网URL/petehelgren/SLyPL/22/

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?

推荐答案

您可以使用css3列，请参见小提琴: http://jsfiddle.net/SLyPL/23 ，较旧的浏览器可能会有所不同，请参见: http://caniuse.com/#search=columns

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

这篇关于如何修复超出页面底部的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！