如何阻止下拉菜单向下推送内容？答案

【问题标题】：How to stop dropdown menu from pushing content down?如何阻止下拉菜单向下推送内容？
【发布时间】：2019-02-10 14:18:46
【问题描述】：

我想知道是否有人可以帮助我制作它，这样内容就不会在不弄乱子菜单的情况下下拉。我尝试将子菜单更改为 position: absolute 但这只是弄乱了子菜单，我还尝试了 z-index: 2 但这没有帮助。我必须解决的唯一另一个想法是以某种方式应用诸如 position: absolute 之类的东西到文本但是，我不知道该怎么做。如果有人可以帮助我，我将不胜感激

【问题讨论】：

这里是 jsfiddle 的链接：jsfiddle.net/Thinkgraser/t2ogvLps/10
请编辑您的问题以包含该链接

标签： html css drop-down-menu submenu

【解决方案1】：

在样式文件的末尾添加这段 css

    nav ul li {
        position: relative;
    }

    nav ul ul {
        position: absolute;
        width: 100%;
    }

对于不将内容向下推的子菜单，它需要具有position: absolute 样式。其他一些 css 是修复样式和子菜单宽度。

【讨论】：

【解决方案2】：

您应该将以下 css 添加到您的代码中

nav ul li {
  position:relative;
}
//add class on sub-menu(.drop-down)
.drop-down{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:1;
}
//z-index value set as your needs

【讨论】：