2

このドロップダウンメニューは、＃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

4

4 に答える 4

2

ホバー時に #parent-wrapper に高さを追加すると、展開されます。

$(".dropdown").hoverIntent({
 over: function() {
   $("ul", this).show().closest('#parent-wrapper').css('height','100px');
}.......
于 2012-12-03T09:20:55.773 に答える
0 
#parent-wrapper {
  width: 500px;
  /*change this: overflow:hidden; for: */
  overflow: visible;
  position: relative;
}
于 2012-12-03T09:03:59.820 に答える
0

ドロップダウンに絶対ではなく固定の位置を与えることで、jqueryを使用せずにこれを達成できると思います。

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

また、ドロップダウンに 2 つ以上の項目がある場合、ドロップダウン メニューは自動的に拡張されます。

于 2013-07-24T14:13:08.753 に答える
0

役職：親戚はこちらの問題児です。Position: Absolute を使用するようにコードを作り直すことができれば、うまくいくと思います。詳細については、以下を参照してください...

CSS: position:absolute div を position:relative div 内に配置する方法: コンテナーのオーバーフロー:hidden によってトリミングされないようにする

于 2013-05-17T04:53:46.050 に答える