css - 溢出内溢出隐藏&定位相对祖父母

Question

我有这个下拉菜单，由于#parent-wrapper 的溢出隐藏和相对位置（由于这个jQuery carousel 是必需的）而被切断。有没有办法让下拉列表的溢出部分显示在#parent-wrapper 之外，同时保持#parent-wrapper 的溢出隐藏和相对位置？

简单的例子：

http://jsfiddle.net/gNUJV/

完整示例：

http://jsfiddle.net/nrQSG/

<div id="parent-wrapper">
  <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>
</div>

和

a {
  color: white;
}
#parent-wrapper {
  width: 500px;
  overflow: hidden;
  position: relative;
}
#parent {
  height: 100px;
  overflow: hidden;
  background: blue;
}
.dropdown ul {
  width: 100px;
  display: none;
  padding: 50px;
  background: black;
  z-index: 2000;
  position: absolute;
}

和

$(".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

在悬停时为#parent-wrapper 添加一个高度，它将展开。

$(".dropdown").hoverIntent({
 over: function() {
   $("ul", this).show().closest('#parent-wrapper').css('height','100px');
}.......

Answer 2

位置：相对是这里的问题孩子。如果您可以重新编写代码以使用 Position: Absolute 我认为它可能会起作用。请参阅以下内容以获取更多详细信息...

CSS：如何在位置中有位置：绝对 div：相对 div 不会被溢出裁剪：隐藏在容器上

Answer 3

我认为您可以在不使用 jquery 的情况下通过为下拉列表提供固定位置而不是绝对位置来实现此目的。

.dropdown ul {
  ...
  position: fixed;
}

此外，如果您的下拉菜单中有两个以上的项目，下拉菜单将自动扩展。

Answer 4

#parent-wrapper {
  width: 500px;
  /*change this: overflow:hidden; for: */
  overflow: visible;
  position: relative;
}