CSS 在溢出隐藏父级中溢出的下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13659545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dropdown menu with overflow inside overflow hidden parent
提问by Mark Boulder
I have this dropdown menu that gets cut off due to #parent's overflow hidden. Is there a way to make the dropdown's overflowing part display outside #parent while keeping #parent's overflow hidden?
由于隐藏了#parent 的溢出，我有这个下拉菜单被切断。有没有办法让下拉列表的溢出部分显示在#parent 之外，同时隐藏#parent 的溢出？
<div id="parent">
<ul>
<li class="dropdown">
<a href="#">Lorem</a>
<ul>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
</ul>
</li>
</ul>
</div>
and
和
a {
color: white;
}
#parent {
height: 100px;
background: blue;
}
.dropdown ul {
width: 100px;
display: none;
padding: 50px;
background: black;
}
and
和
$(".dropdown").hoverIntent({
over: function() {
$("ul", this).show();
},
out: function() {
$("ul", this).hide();
},
timeout: 500
});
Requires: http://cherne.net/brian/resources/jquery.hoverIntent.minified.js
需要：http: //cherne.net/brian/resources/jquery.hoverIntent.minified.js
回答by Uttam Kadam
Please modify <ul>css as :
请将<ul>css修改为：
.dropdown ul {
width: 100px;
display: none;
padding: 50px;
background: black;
z-index:1000;
position:absolute;
}
This will take menu outside.
这将把菜单带到外面。
回答by Giles Roberts
An alternative solution would be to replace the ul with a select element. The select element always seems to get rendered as you would hope the drop down list to be rendered, above and outside the parent element if necessary. You'll need to do some styling to make it look nice though. Looking at your example above I'm not sure if a select would be flexible enough for your display requirements as you have a list within a list.
另一种解决方案是将 ul 替换为 select 元素。select 元素似乎总是像您希望下拉列表在父元素上方和外部（如有必要）呈现一样呈现。不过，您需要做一些样式以使其看起来不错。看看你上面的例子，我不确定一个选择是否足够灵活以满足你的显示要求，因为你在列表中有一个列表。
<div id="parent">
<select name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
</div>
Uttam Kaddam's solution of giving the ul a high z-index and making it's position absolute did not work for me as I have several lists within the same parent element, actually drop downs on a table headers, which messed up the display of the table headers.
Uttam Kaddam 为 ul 提供高 z-index 并使其绝对位置的解决方案对我不起作用，因为我在同一个父元素中有多个列表，实际上是在表格标题上下拉，这弄乱了表格标题的显示.
回答by Giles Roberts
a {
color: white;
}
#parent-wrapper {
width: 500px;
position: relative;
float:left;
}
#parent {
height: 100px;
background: blue;
display:block;
}
.dropdown ul {
width: 100px;
display: none;
padding: 50px;
background: black;
z-index: 2000;
position: absolute;
}
