div后面的下拉菜单

时间:2017-01-11 23:58:14

标签: css wordpress drop-down-menu

我在Wordpress上使用蒙大拿模板,我不知道为什么我的下拉菜单隐藏在主滑块后面......

以下是测试环境的链接:http://evolutionescaperooms.com/dev/

enter image description here

即使我把ul标签放到z-index:99999或position:absolute,仍然不起作用......但如果你关闭并重新打开菜单,下拉列表将在滑块上方,没有任何理由..

有人快速解决了吗?

由于

1 个答案:

答案 0 :(得分:1)

这是一个溢出问题,而不是z-index问题。 .navigation div在其css中有overflow: hidden;。这会裁剪任何超出其边界的子元素。

当您打开并关闭导航时,它会通过Javascript将溢出切换为overflow: initial。因此,为什么它只在菜单打开和关闭后才有效。

原创CSS:

.navigation {
    position: relative;
    display: table;
    overflow: hidden; /* Preventing overflowing popup menu from showing */
    width: 100%;
    margin-top: 40px;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
}

更新至:

.navigation {
    position: relative;
    display: table;
    width: 100%;
    margin-top: 40px;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
}