Question

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

Answer 1

首先将父元素定位为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 2

您需要将.menu项设置为相对位置

position: relative;

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

这是您fiddle

的更新版本

Answer 3

这不适用于框架构建..

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

如何获取下拉菜单以覆盖其他元素

3 个答案: