4

#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

4

3 に答える 3

7

<ul>css を次のように変更してください。

.dropdown ul {
  width: 100px;
  display: none;
  padding: 50px;
  background: black;
  z-index:1000;
  position:absolute;
}

これにより、メニューが外に出ます。

于 2012-12-01T12:49:34.603 に答える
2

別の解決策は、ul を select 要素に置き換えることです。select 要素は、必要に応じて、ドロップダウン リストが親要素の上および外側にレンダリングされることを望むように、常にレンダリングされるように見えます。ただし、見栄えを良くするには、スタイリングを行う必要があります。上記の例を見ると、リスト内にリストがあるため、選択が表示要件に対して十分に柔軟であるかどうかわかりません。

<div id="parent">
    <select name="select">
      <option value="value1">Value 1</option> 
      <option value="value2" selected>Value 2</option>
      <option value="value3">Value 3</option>
    </select>
</div>

Uttam Kaddam の ul に高い z-index を与え、絶対位置にするという解決策は、同じ親要素内に複数のリストがあり、実際にはテーブル ヘッダーにドロップ ダウンがあり、テーブル ヘッダーの表示が台無しになるため、うまくいきませんでした。 .

于 2013-12-17T16:58:27.190 に答える