子菜单在导航菜单中被截断

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*/ 
} 

如果有元素直接低于被推下来的导航栏，那么你可能需要相应地调整那些。