我有这个下拉菜单,由于#parent的溢出被隐藏而被切断。有没有办法让#drop的溢出部分显示在#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>
和
a {
color: white;
}
#parent {
height: 100px;
background: blue;
}
.dropdown ul {
width: 100px;
display: none;
padding: 50px;
background: black;
}
和
$(".dropdown").hoverIntent({
over: function() {
$("ul", this).show();
},
out: function() {
$("ul", this).hide();
},
timeout: 500
});
需要:http://cherne.net/brian/resources/jquery.hoverIntent.minified.js
答案 0 :(得分:6)
请将<ul>
css修改为:
.dropdown ul {
width: 100px;
display: none;
padding: 50px;
background: black;
z-index:1000;
position:absolute;
}
这将在外面进行菜单。
答案 1 :(得分:1)
另一种解决方案是用select元素替换ul。 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给ul提供高z-index并使其位置绝对的解决方案对我不起作用,因为我在同一个父元素中有几个列表,实际上是在表头上的下拉,这搞砸了显示的表格标题。
答案 2 :(得分:0)
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;
}