css - 下拉菜单移动其他内容

Question

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

有人可以检查一下吗？

Answer 1

您可以使用 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;
}

<nav>
    <ol>
        <li>Section 1
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
        <li>Section 2
            <ul>
                <li>2.1</li>
                <li>2.2</li>
                <li>2.3</li>
                <li>2.4</li>
            </ul>
        </li>
        <li>Section 3
            <ul>
                <li>3.1</li>
                <li>3.2</li>
                <li>3.3</li>
            </ul>
        </li>
    </ol>
</nav>


<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu suscipit nibh. Sed imperdiet velit nec velit varius, id maximus sem semper. Pellentesque malesuada augue at ex dapibus, quis tristique erat ornare. Mauris viverra vulputate urna imperdiet tristique. Nunc et interdum turpis. Phasellus vitae odio quam. Donec imperdiet in nibh eu viverra. Ut vestibulum efficitur odio, id malesuada ligula facilisis eu. Pellentesque consequat mauris lectus, et malesuada metus dignissim eget. Curabitur ut quam felis. Ut luctus blandit est, et elementum urna rutrum ac. Quisque posuere lorem ac blandit accumsan.</p>
    <p>Cras convallis est lectus, ac venenatis dolor interdum a. Sed sit amet mattis urna. Nulla id efficitur sem, viverra dapibus magna. Donec a massa vitae odio lobortis commodo. Donec non enim aliquam, lobortis ex vel, euismod tellus. Etiam lacinia, dolor ac laoreet pulvinar, augue odio bibendum justo, sed tincidunt nisl ipsum eget urna. Etiam ligula urna, mollis sed facilisis nec, ultrices et mi. Quisque pretium vestibulum risus at elementum. Pellentesque nisl risus, aliquam in erat sit amet, mattis fringilla est. Ut malesuada ullamcorper ultricies. Etiam vitae consequat elit, in pharetra turpis. Curabitur maximus eros quis varius facilisis.</p>
</div>