隠されたオーバーフローを伴うラッパーの中にCSSドロップダウンメニューを配置

Question

私は知っていますが、漠然としたタイトルですが、私が1つの文で欲しいものを記述するのは難しいです。

私の問題は以下の通りです。jQueryによってアクティブ化されたいくつかのドロップダウンメニューを持つテンプレートがあります。次のようにドロップダウン・リストは、最初のレベルのリスト内の第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> 

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

問題は、すべてこれがoverflow：hiddenを持つdivにラップされていることです。サブメニューがこのdivの右側に近すぎると、リスト項目が長すぎる場合、リストはラッパーの右の枠内に入り、部分的に表示されなくなります。 オーバーフロー：autoラッパーに不要なスクロールバーを与えます。 Overflow：visibleは問題を解決しますが、ラッパーには高さが設定されていないので、背景色や枠線は表示されません。これは関数の一部です。

は、コードの大束を引用する必要がないために、実際の例では、誰もがラッパーの外のメニューのいずれかのショーを行います解決策を知ってい

http://www.pkr.nl/template/forumdisplay.htmlで見ることができ、またはそれは彼らがに揃えますそれはまともな方法で正しいですか？

Answer 1

浮動小数点理由​​は残っていますか？

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