純粋なCSSドロップダウンメニューの問題

Question

私はhereという純粋なCSSメニューを使用しています。

すべて機能しますが、作成したメニューを別のdiv領域に配置して、ページ全体にバーを作成したいとします。

これは、私がこのセクションでオーバーフローを置く場合に動作します：

#nav{ 
    list-style:none; 
    margin-bottom:10px; 
    margin-left:30%; 
    width:100%; 
    overflow:auto; 
} 

は、これはその後、作業バーのドロップダウンを停止します。

どのように私はこれを回避することができますか？

Answer 1

：

潜在的に重要な（その子の同じ高さにして展開し#nav（またはdivの上）に固定された高さを使用します。あなたの場合子供li秒に固定された高さで作業していない、あなたはどちらか、その正確な高さを知っている（=フォントサイズ、行の高さとboxmodell経由で計算）#nav上）

または

使用clear:left;ない場合がありますの助けを借りて疑似要素（注意：< = 7！）または周囲のdivに余分な要素を持つ(described here)。

<div id="wrapper"> 
<ul id="nav"> 
    <li></li> 
    .... 
</ul> 
<div style="clear:left;"></div> 
</div> 

Answer 2

私はこれしようとするだろう。このようなあなたは、スクロールバーで、

変更を良く見れば、

overflow: visible; 

または：に

overflow: auto; 

：

変更を：

overflow: auto; 

へ：

overflow: scroll; 

これら2つのオプションのいずれかがテキストが欠落しているものは何でもクライアントビューを助けます。それはあなたが見たいと思うように、そしてあなたがどのくらいのスペースを使って作業しているかにかかっています。しかし、これらの2つのオプションのいずれかが実行可能です。お役に立てれば。 overflow:auto/hidden;あなたはいくつかのオプションを持って省略することができるようにするために

Answer 3

具体的にどのようなことを達成したいのか、なぜこの例ではオーバーフローを使用する必要があるのか​​よくわかりません。あなたは単にhis exampleを変更できますか？

フロートをクリアするだけの場合はclearfix（つまり6+）を使用できます。