CSS：なぜ私はオーバーフローを取るときにこれが壊れているのですか？

Question

クラスナビで、オーバーフローが発生した場合、センターが隠れていてうまく動作しますが、オーバーフローを使用できません：ナビゲーションでドロップダウンを隠すため、非表示にします。

しかし、私がそれを取り出すと、それは壊れますか？オーバーフロー以外の何かを使うことができます：それを正しく見せて、私のナビゲーションを隠さないために隠されていますか？

http://jsfiddle.net/xtian/svr8C/1/

Answer 1

だけ.navの高さを（35px？）を設定し、overflow: hidden;

Answer 2

そのはoverlfowが明らかに隠されたすべてのフロートを引き起こす要素に浮動李の高さを与えて削除。この文http://jsfiddle.net/svr8C/11/

：解決策はこれです

.nav:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";} 

はLIS後に目に見えない要素を追加し、それらをクリア。有名なoocsのメディア要素からの抜粋：https://github.com/stubbornella/oocss/blob/master/core/media/media.css

Answer 3

オーバーフローを試してください。 - これはfloatと同様にfloatをクリアします：hidden;注意しないとスクロールバーが表示されることがあります。あるいは、浮動小数点のすべてのアプローチを試すこともできます。浮動小数点数の要素の中にある浮動小数点型の要素は、浮動小数点のクリアも強制します。

Answer 4

あなたはこの種のものを使用できます。

HTML：

<ul class="menu"> 
    <li><a href="#">Testing</a></li> 
    <li><a href="#">Testing</a> 
     <ul class="submenu"> 
      <li><a href="#">Testing</a></li> 
      <li><a href="#">Testing</a></li> 
      <li><a href="#">Testing</a></li> 
      <li><a href="#">Testing</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Testing</a></li> 
    <li><a href="#">Testing</a></li> 
</ul> 

CSS：

.menu li { 
    display: inline-block; 
} 

.menu li a { 
    color: #fff; 
    background: orangered; 
    text-decoration: none; 
    padding: 0.5em; 
    border-bottom: 5px solid #000; 
} 

.menu li .submenu { 
    display: none; 
} 

.menu li:hover > .submenu { 
    display: block; 
    position: absolute; 
    top: 30px; 
} 

.menu li .submenu li { 
    display: block; 
    margin-top: 20px; 
} 

ここでは、このハックにdemo