如何防止下拉菜单推动内容向下？

Question

我想知道有没有人能帮我解决这个问题：在不影响子菜单的情况下，使内容不下降。我试过将子菜单更改为position: absolute，但那只会弄乱子菜单；我还尝试了z-index: 2，但也没有帮助。 我唯一能想到的解决方法是在文本上应用position: absolute，但我不确定如何做到这一点。 如果有人能帮我，我将非常感激。

- Thinkgraser

---

这是 jsfiddle 的链接：https://jsfiddle.net/Thinkgraser/t2ogvLps/10/ - Thinkgraser

请编辑您的问题，包括该链接。 - customcommander

Answer 1

请将以下的CSS代码添加到你的样式文件的末尾：

    nav ul li {
        position: relative;
    }

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

为了使子菜单不会将内容向下推，需要使用position: absolute样式。其他的css是为了修复样式和子菜单宽度。

- Iftifar Taz

Answer 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

- Hammad tariq

Answer 3

将您的下拉菜单的position: absolute;，然后将其下方的元素设置为position: relative;。

如果这不起作用，请尝试将下拉菜单和其下方的元素都设置为position: absolute;，然后将下拉菜单的z-index设置为高于其下方的元素。

我将下拉菜单和其下方的元素都设置为了absolute，它起作用了。现在下拉菜单忽略了其下方的元素。

- Rudy jestar