Question

我的导航菜单中的子菜单已被切断。我知道它与溢出有关：导航栏id中隐藏的css行，但如果我删除它，页面容器会神奇地获得一些主要的填充

这是我的代码：

<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

然后使用padding来代替使用#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*/
}

如果导航栏正下方有元素被推下，那么您可能需要相应地调整它们。

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

2 个答案: