如何阻止下拉菜单将内容向下推？

Question

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

Answer 1

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

    nav ul li {
        position: relative;
    }

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

为了使子菜单不向下推内容，它需要具有 position: absolute 样式。 css 的其他部分是固定样式和子菜单宽度。

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

如何阻止下拉菜单将内容向下推？

How to stop dropdown menu from pushing content down?

html

css

submenu

drop-down-menu