Html CSS下拉菜单被父div高度切断

在我的设置中，我将导航栏水平设置并包含在标题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>

---

您可以尝试使用子菜单上的绝对定位将其从文档流中删除。

我对您在此处提出的问题感到有点困惑，但我在菜单显示的位置创建了一个小提琴

我删除了#主菜单包装的样式，并删除了#标题部分的背景色

希望这对您来说是一个不错的起点：

---

你能做一个小提琴或张贴你的css吗？你有没有尝试过在包装上

overflow:visible

或

overflow:auto

？以前没有，但现在我做了<代码>溢出：可见不执行任何操作，

溢出：自动

仅在我将鼠标悬停在服务链接上时添加一个滚动条。子菜单UL上的位置已设置为绝对。我以为这会让它显示在父包装之外，但它没有。我需要主菜单包装来居中我的页面。我想你把所有这些div都弄得有点太复杂了。我建议您重新开始，以便使用更干净的代码。这里有一个不错的教程：哈哈，是的，我用这个把自己编码到了一个角落。我想办法解决我的问题。。。这有点草率，但我接受了。当我启用我的横幅时，高度问题不是问题，我只是使用z索引来确保菜单显示在顶部。

#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;
}

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