html - CSS 下拉菜单被父 div 高度截断

Question

在我的设置中，我将导航栏水平设置并包含在我的标题 div 中，如下所示:

<div id="header-section">
    <div id="main-menu-wrapper">
        <ul id="main-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Services</a>
                <ul id="sub-men">
                    <li><a href="#">Service 1</a></li>
                    <li><a href="#">Service 2</a></li>
                    <li><a href="#">Service 3</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

我的问题是子菜单没有显示，因为“main-menu-wrapper”的高度设置为自动。当我将高度设置为 100px 时，子菜单就会显示出来。当我将子菜单上的位置设置为静态而不是绝对时，它会扩展整个主菜单包装器。如何让子菜单正确显示？

这是我整个标题部分的 CSS 部分:

#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}

#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}

#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}

#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}

#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}

#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}

#main-menu li ul {
position: absolute;
display: none;
}

#main-menu li ul li{
float: none;
}

#main-menu li:hover ul {
display: block;
}

#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}

#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}


#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}

#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}

#logo {
max-width: 600px;
height: auto;
}

Answer 1

我对你在这里问的问题有点困惑，但我在你的菜单显示的地方创建了一个 fiddle 。

我删除了#main-menu-wrapper 的样式，并删除了#header-section 的背景色。

希望这对您来说是一个不错的起点:http://jsfiddle.net/44vRN/

#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}