css - ul div 推出父级

Question

我对 ul div 有疑问。我的 ul 的父 div 没有把它放在里面。我有父 div (subMenu) 定位和 z-indexed 但是 ul 子 (subMen) 只是推出并显示在它的底部，当它应该包含在父母并拉到我应用于父母的定位。我试过浮动和列表式定位它。但似乎什么都不重要。这是CSS代码：

#subMenu {
background-image: url(images/sub_nav_background2.png);
width: 1280px;
height: 60px;
position: relative;
top: -145px;
z-index: -100;
}

#subMen {
margin-left: 330px;
list-style-position: inside !important;
float: left !important;
height: 20px;
width: 900px !important;
font-size: 14px;

}

这是涉及此的 HTML 部分。

<div id="subMenu">
        <ul id="subMen">
        <li><a href="#">BRAND MARKETING</a></li>
        <li><a href="#">EXPERIENTIAL MARKETING</a></li>
        <li><a href="#">PERFORMANCE SOLUTIONS</a></li>
        <li><a href="#">MEETING & EVENT SOLUTIONS</a></li>
        </ul>
        </div>
<div class="clearfix"></div>

这是正在发生的事情的图像。

底部列出的菜单应该位于该灰色区域并隐藏在顶部的主导航下方。

Answer 1

你可以做

list-style-position:inside;

Answer 2

我根据您的代码整理了一个小提琴。

http://jsfiddle.net/wby6W/1/

#subMenu {
background:#ccc;
width: 1280px;
height: 60px;
position: relative;
z-index: -100;
overflow:hidden;
}

#subMen {
margin-left: 330px;
float: left;
width: 900px;
font-size: 14px;
}

我删除了 top:-145px 因为我需要查看窗口中的文本。如上所述，我还添加了溢出：隐藏到您的 CSS 中。

Answer 3

当您浮动某些东西时，它可以逃脱其父 div。您应该将该overflow属性添加到您的父级。如果您指定overflow: hidden它将隐藏溢出；overflow: scroll将滚动。

工作示例：http: //jsfiddle.net/BZFTY/2/。

在上面的小提琴中，尝试将溢出属性更改为不同的值：default、scroll和hidden.