在没有下拉列表的情况下制作下拉列表将向左或向右的内容向下推（周围的其他链接）？

Question

我尝试制作一个下拉列表但没有成功，内容没有被下拉到下拉菜单下，我无法让它工作，我已经尝试使用 float 并且显示不起作用：s 有人有什么建议吗？

Answer 1

看起来您真的一点进步都没有，所以我会犹豫是否只写一个长答案来解释下拉菜单的工作原理，而是建议您查找教程。您可能需要使用 javascript 来使下拉菜单 "clickable" 来打开和关闭它。

但我会尽力引导您朝着正确的方向前进！

为了避免下拉菜单移动其他元素，它需要具有 css 属性 "position:absolute;" 并且父元素（菜单所在的元素）必须具有属性 "position:relative;"

<style>
    .menuButton{
        position:relative;
    }

    .dropDown{
        position:absolute;
        bottom:0;
    }
</style>

<div class="menuButton"> 
    <p>Click me!</p>
    <div class="dropDown">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </div>
</div>

不过，我建议您使用 javascript 来打开和关闭“.dropDown”class 属性 "display:none"。你很可能会通过谷歌搜索学得更好，因为我认为我没有教过你，而且人们可能不会在这样一个基本问题上给你很多帮助

在没有下拉列表的情况下制作下拉列表将向左或向右的内容向下推（周围的其他链接）？

make dropdown list without the dropdown are pushing the left or right content down (the other links around it)?

html

css

drop-down-menu