0

我有一个下拉菜单会显示一些内容。

<ul class="menus" style="">
    <li>hey</li>
</ul>

这是CSS：

.menus {
    width: 607px;
    background-color: white;
    border-bottom: solid 1px #9f9f9f;
    border-left: solid 1px #9f9f9f;
    border-right: solid 1px #9f9f9f;
    bottom: 20px;
    margin: 0;
    position:relative;
}

.menus li {
    list-style: none;
    display: block;
    padding: 15px;
    border-bottom: solid 1px #d6d6d6;
}

.menus li:hover {
    background-color: #71bfdb;
    color: white;
    border-bottom: solid 1px #3fb7d3;
    border-top: solid 1px #3fb7d3;
    text-decoration: none;
}

.menus li a:hover {
    text-decoration: none;
}

每当下拉菜单打开时，所有内容都会移到底部，具体取决于列表的长度。

问题

我怎样才能防止这种情况？如果我放置绝对位置，整个下拉列表会变得疯狂，就像移动位置一样，而不是我想要的。

4

1 回答 1

2

用于position: absolute将其从页面流中删除（relative意味着它仍在页面流中，这就是导致它向下推送内容的原因）。

top您可以使用、bottom和css 属性（即left）来更改绝对定位元素的显示位置。这些像素值是相对于带有 的第一个父元素的，因此如果您相对定位父元素，应该很容易将其显示在页面上的适当位置。 righttop: 0px; left: 10px;position: relative

这应该解决您对绝对定位的担忧，正如您所说的那样，它会“发疯”！

于 2013-05-03T15:43:18.247 回答