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

Question

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

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;
}