Question

我有一个ul div的问题。我的父div为ul而不是它。我有父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>

以下是正在进行的IMAGE。

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

Answer 1

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

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

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

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

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

Answer 3

你可以做到

list-style-position:inside;

ul div正在推出父母

3 个答案: