Question

我应该在此代码中更改http://jsfiddle.net/sohuzpLy/以使下拉菜单不会移动其他内容？使用position:absolute和position:relative尝试了一些操作，但仍无法使其正常工作。

有人可以查一下吗？

Answer 1

您可以使用setRecordPositionUpdateListener元素作为导航的包装器;我想这最初是你的想法。使有序列表nav定位，然后使包装absolute定位应该可以解决这个问题。但是，您需要使用填充来正确设置它。

为了避免这种填充问题，我建议您将内容与自己的包装器分开。通过这种方式，您可以将其放在导航包装下面，这就是大多数解决方案的工作方式。

relative

以下是代表建议解决方案的代码段：

.content {
    padding-top: 2.5em;
}

nav {
    width: 80%;
    margin: 0 auto;
    position: relative;
    padding-top: 1em;
}

ol {
    list-style-type: none;
    font-size: 18px;
    line-height: 2em;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: center;
    position: absolute;
    width: 100%;
}

.content {
    padding-top: 2.5em;
}

nav {
    width: 80%;
    margin: 0 auto;
    position: relative;
    padding-top: 1em;
}

ol {
    list-style-type: none;
    font-size: 18px;
    line-height: 2em;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: center;
    position: absolute;
    width: 100%;
}

ol > li {
    float: left;
    width: 32%;
    background-color: black;
    color: white;
    border-left: 1px solid white;
}

ol li ul {
    list-style-type: none;
    display: none;
    padding: 0;
    margin: 0;
}

ol li ul li {
    border-top: 1px solid white;
}

ol li:hover {
    background-color: #333333;
}

ol li:hover ul {
    display: block;
}

ol li ul li:hover {
    background-color: #444444;
}

Answer 2

尝试将最小高度设置为更高的值。它有助于挖掘，但我是根据此处找到的方法完成的： https://www.w3schools.com/howto/howto_css_dropdown.asp

下拉菜单会移动其他内容

2 个答案: