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

时间:2013-10-31 03:24:19

标签: css navigation overflow submenu

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

2 个答案:

答案 0 :(得分: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

,请参阅以下有关折叠边距的文档

希望这会有所帮助。

答案 1 :(得分:1)

我不确定这会如何影响您网页的布局,但如果您增加#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*/
}

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