Question

我有这个下拉菜单，因为＃parent-wrapper的溢出隐藏和位置相对而被切断（由于这个jQuery轮播需要）。有没有办法让下拉的溢出部分显示在#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

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

Answer 3

职位：亲戚是这里的问题孩子。如果你可以重新编写代码来使用Position：Absolute我认为它可能有效。有关详细信息，请参阅以下内容......

CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

Answer 4

我认为你可以通过给下拉列表一个固定而非绝对的位置而不使用jquery来实现这个目的。

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

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

内溢溢出隐藏＆amp;位置相对祖父母

4 个答案: