如何让下拉菜单覆盖其他元素

Question

我正在创建一个小网站，但我无法获得下拉菜单，当我将鼠标悬停在 "gallery" 按钮上时，它会出现，无法覆盖菜单下方的段落而不是按下整个内容下来。我已经尝试了 position: relative; z-index: 9999; 的所有组合。但是，当我为 <ul> 元素设置 position: absolute; 时它确实有效，但弄乱了 <ul> 项目的所有布局。请帮助我完成这项工作，因为我开始感到头疼... Here's my code。当您将鼠标悬停在 "gallery" 按钮上时，您可以看到该段落是如何下降的。我希望段落保留在原处，并且下拉菜单覆盖它。

Answer 1

您需要为您的 .menu-item 设置一个相对位置

position: relative;

现在您可以将 ul 设置为 absolute 位置，而不会弄乱您的布局。

这是您的 fiddle

的更新版本

Answer 2

首先将父元素定位为 relative 使其成为绝对定位后代的 establish a new containing block:

.menu-item {
    width: 33.33%;
    float: left;
    position: relative; /* <-- added declaration */
}

然后，绝对定位嵌套的<ul>，添加top，left偏移以及width：

Example Here

.menu-item ul {
    margin-top: 5px;
    list-style-type: none;
    height: 0px;
    overflow: hidden;

    position: absolute;  /* <-- added declarations */
    left: 0; top: 100%;  /*     here               */
    width: 100%;         /*     and here...        */

    transition: height 1s ease;
}

Answer 3

这不适用于框架构建..

示例：您在顶部有两个框架，其中包含内容，并且在顶部框架上有一个 CSS 下拉菜单。当你进入菜单时，在内容页的前面没有看到子菜单。

如何让下拉菜单覆盖其他元素

How to get a drop-down menu to overlay other elements

html

css

overlay

position

menu