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

Question

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

Answer 1

首先定位父元素relative,使其为绝对定位的后代建立一个新的包含块:

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

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

这里的例子

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