Question

我有一个用css设计的下拉菜单，可以拥有无限数量的项目和级别。在使用它之后我遇到的问题是大型列表和多个级别可能导致列表在页面底部或右侧运行。是否有一种方法可以用css来确定它已经从页面上运行然后移动列表以使其保持可见状态？我看了几个这样的例子：

How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

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

有任何调整建议，即使菜单太长或太嵌套也要显示？

Answer 1

您可以使用css3列，请参阅小提琴：http://jsfiddle.net/SLyPL/23，旧浏览器可能会有所不同，请参阅：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; 
}

如何修复延伸到页面底部的下拉菜单

1 个答案: