子菜單在導航菜單中被截斷

Question

我的子菜單在我的導航菜單中被截斷。我知道它是與溢出：在導航欄的ID CSS的隱藏線，但如果我刪除的是，pagecontainer奇蹟般地得到了一些非常專業的填充

這裏是我的代碼：

<div id="pagecontainer"> 
<div id="header"> 
    <div id="navmenu"> 
     <div id="navbar"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li class="doctool"><a href="#">Docs and Tools</a> 
        <ul> 
         <li><a href="#">test</a></li> 
         <li><a href="#">test</a></li> 
         <li><a href="#">test</a></li> 
        </ul></li> 
       <li class="spacer"></li> 
       <li><a href="#">Contacts</a></li> 
       <li class="last"><a href="#">OnCore</a></li> 
       </ul> 
     </div> 
    </div> 
<!-- Close Header --></div> 
<div class="container"> 
    <div id="Footer"></div> 

我無法把我的CSS在不當，所以這裏的鏈接到我，jsfiddle

Answer 1

取出overflow:hidden;從#navmenu

然後，而不是使用利潤率#navmenu使用填充：

#navbar{ 
    padding-top:132px; 
    width:700px; 
    height:40px; 
    padding-left:140px; 
} 

更新小提琴：http://jsfiddle.net/DYF6U/

我相信這是與利潤率崩於相互推父往下做。有人請糾正我，如果我錯了。

這裏有一個，如果你的興趣http://www.w3.org/TR/css3-box/#collapsing-margins

希望這有助於崩潰邊緣的一些文檔。

Answer 2

我不確定這將如何影響頁面的佈局，但是如果您增加#navmenu的高度，那麼子菜單將不再被截斷。

JS Fiddle

代碼調整：

#navmenu { 
    margin: auto; 
    overflow: hidden; 
    padding: 0; 
    width: 980px; 
    background-image:url('https://dl.dropboxusercontent.com/u/3876653/header.png'); 
    background-repeat: no-repeat; 
    background-position: center top; 
    height:300px; /*Edit this value to allow room for sub menu items*/ 
} 

如果有元素直接低於被推下來的導航欄，那麼你可能需要相應地調整那些。