隐藏在div后面的Wordpress菜单下拉菜单

I created a form for a Wordpress site http://www.bassetandbeagle.org/adoptionapplication/ and in the CSS code I put div position: absolute, so that the form would scale on mobile devices.

我为Wordpress网站创建了一个表单http://www.bassetandbeagle.org/adoptionapplication/,在CSS代码中我把div位置:绝对,这样表单就可以在移动设备上扩展。

#formContainer {
min-width: 950px;
max-width: 950px;
padding: 10px;
position: absolute;
z-index: -1; }

Now the drop-down menus, above the form, are hidden behind it.

现在,表单上方的下拉菜单隐藏在它后面。

I attempted to set a higher z-index for the menu:

我试图为菜单设置更高的z-index:

.nav-menu{
position: relative;
z-index: 1; }

But this had no apparent effect. I tried 1, 100, 1000... nada

但这没有明显的效果。我试过1,100,1000 ...... nada

I was able to get the drop-downs to show up again, by changing the .nav-menu to position: absolute. Unfortunately, this screwed up the positioning of the menus on the page.

通过将.nav-menu更改为position:absolute,我能够再次显示下拉菜单。不幸的是,这搞砸了页面上菜单的位置。

I am pretty sure I am on the right track with the z-index property, based upon the other posts I have read. So, what am I doing wrong here?

基于我读过的其他帖子,我很确定我在z-index属性的正确轨道上。那么,我在这里做错了什么?

Thx

2 个解决方案

#1

Here is the solution of your problem -

这是你的问题的解决方案 -

CSS:

style.css line: 1431

style.css行:1431

.site {
    margin: 0 auto;
    max-width: 68.5714rem;
    /*overflow: hidden;*/  /* remove this css rule and you will see the dropdown menu*/
}

Note: Check you site that where your .site class is applying and make the changes in css as per need.

注意:检查您的.site类所在的站点,并根据需要在css中进行更改。

Screen Shot:

#2

Remove position: absolute from #formContainer.

从#formContainer中删除位置:绝对。