1

あいまいなタイトルですが、私が欲しいものを一文で説明するのは難しいです。

私の問題は次のとおりです。jQueryによってアクティブ化されたいくつかのドロップダウンメニューを備えたテンプレートがあります。ドロップダウンリストは、次のように、第1レベルのリスト内に第2レベルのナビゲーションアイテムとして表示されます。

<ul class="tools">
  <li class="dropdown">
    <a href="#">Tools</a>
    <ul class="submenu">
      <li><a href="/">Option 1</a></li>
      <li><a href="/">Option 2</a></li>
      <li><a href="/">Option 3</a></li>
    </ul>
  </li>
  <li><a href="/">More</a></li>
</ul>

サブメニューはデフォルトで非表示になっており、サブメニューが属するリスト項目（この場合は「ツール」）をクリックすると表示できます。サブメニューは絶対位置に配置されているため、表示されるときは常にクリックされたリンクのすぐ下にあります。これはすべて完全に正常に機能します。

問題は、これらすべてがオーバーフローのあるdivにラップされていることです：非表示。サブメニューがこのdivの右側に近すぎて、リストアイテムが長すぎる場合、リストはラッパーの右側の境界線の下に表示され、部分的に非表示になります。オーバーフロー：autoはラッパーにスクロールバーを提供しますが、これは不要です。オーバーフロー：visibleは問題を解決しますが、ラッパーに高さがないようにするため、背景色と境界線が表示されなくなります。これは機能の一部であるため、どちらも役に立ちません。

大量のコードを引用する必要がないように、ライブの例をで見ることができますhttp://www.pkr.nl/template/forumdisplay.html

メニューをラッパーの外側に表示するか、適切な方法でメニューを適切に配置するソリューションを知っている人はいますか？

4

1 に答える 1

1

あなたが#container .column左に浮かんでいる理由はありますか？

フロートを削除してoverflow:hiddenからから削除する#containerと、メニューが表示されます。

于 2009-08-21T11:27:43.540 に答える