溢出隐藏父级内部溢出的下拉菜单

Question

我有一个下拉菜单，由于隐藏了 #parent 的溢出而被切断。有没有办法使下拉列表的溢出部分显示在 #parent 之外，同时隐藏 #parent 的溢出？

http://jsfiddle.net/vXuuA/

  <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

Answer 1

请将<ul> css 修改为：

.dropdown ul {
  width: 100px;
  display: none;
  padding: 50px;
  background: black;
  z-index:1000;
  position:absolute;
}

这将把菜单带到外面。

Answer 2

另一种解决方案是用选择元素替换 ul。 选择元素似乎总是被渲染，因为您希望在必要时在父元素的上方和外部呈现下拉列表。 不过，您需要做一些样式以使其看起来不错。 查看上面的示例，我不确定选择是否足够灵活，可以满足您的显示要求，因为列表中有一个列表。

<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 索引并使其位置绝对的解决方案对我不起作用，因为我在同一父元素中有多个列表，实际上是表格标题上的下拉列表，这弄乱了表格标题的显示。

Answer 3

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