如何获取下拉菜单以覆盖其他元素 [英] How to get a drop-down menu to overlay other elements

问题描述

我创建了一个小网站，我无法获取下拉菜单，当我悬停在它上面的图库按钮，覆盖菜单下面的段落，而不是推整个内容下。我已经尝试过 position：relative的每个组合; z-index：9999; 。然而，当我为< ul> 元素设置 position：absolute; ，它实际上工作， < ul> 项目的布局。请帮助我完成这项工作，因为我开始撞我的头... 这里是我的代码。当您在图库按钮上悬停时，您可以看到段落如何下降。

I am creating a little website and I can't get the drop-down menu, which comes out of the "gallery" button when I hover on it, to overlay the paragraph below the menu instead of pushing the whole content down. I've already tried every combination of position: relative; z-index: 9999;. However, when I set position: absolute; for the <ul> element it actually works, but messes up all the layout of <ul> items. Please help me to get this done because I'm starting to bump my head... Here's my code. You can see how the paragraph goes down when you hover on the "gallery" button. I wish the paragaph stayed where it is and the drop-down menu overlayed it.

推荐答案

首先将父元素放置为 relative ，以使其为绝对定位的后代建立新的包含块：

First position the parent element as relative to make it establish a new containing block for absolutely positioned descendants:

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

code>< ul> 绝对，添加顶部，左 width ：

Then, position the nested <ul> absolutely, add top, left offsets as well as 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;
}

这篇关于如何获取下拉菜单以覆盖其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！