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”的高度设置为auto。当我设置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

我对你在这里提出的要求感到有些困惑，但我创建了一个菜单显示的小提琴。

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

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

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

Answer 2

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

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

2 个答案: