css - 下拉菜单，其中溢出隐藏在父内部

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

这将带出菜单。