0

我的子菜单在我的导航菜单中被切断。我知道它与溢出有关：导航栏 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的链接

4

2 回答 2

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

希望这可以帮助。

于 2013-10-31T03:36:40.700 回答
1

我不确定这将如何影响您的页面布局，但是如果您增加 #navmenu 的高度，那么子菜单将不再被切断。

JS小提琴

代码调整：

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

如果导航栏正下方的元素被向下推，那么您可能需要相应地调整这些元素。

于 2013-10-31T03:37:12.963 回答