CSS：爲什麼當我採取溢出時，這是破壞：隱藏了嗎？

Question

所以在類導航，當我有溢出：隱藏在中心和運作良好，但我不能使用溢出：隱藏，因爲它會隱藏我的下拉導航。

但是當我把它拿出來，它打破了它？除了溢出之外，還有什麼可以使用的：隱藏起來讓它看起來正確，而不隱藏我的導航？

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

Answer 1

只需設置高度（35px？）的.nav並刪除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後增加了一個無形的元素，並清除它們。它取自着名的oocss媒體元素：https://github.com/stubbornella/oocss/blob/master/core/media/media.css

Answer 3

嘗試溢出：auto; - 這將清除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