css - 溢出内部溢出隐藏和位置相对祖 parent

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');
}.......