下拉菜单不完全重叠菜单选项。 Z-index设置

I have expanded the menus so you can see the overlapping menus on http://ocart.site/opencart/

我已经扩展了菜单，因此您可以在http://ocart.site/opencart/上看到重叠的菜单

Do you know which Z-index settings to apply so when you hover over Desktops and the menu drops down. You cannot see the Components menu title within the dropdown.

您知道要应用哪种Z-index设置，因此当您将鼠标悬停在桌面上时菜单会下降。您无法在下拉列表中看到“组件”菜单标题。

2 个解决方案

#1

change the following css codes in your stylesheet

更改样式表中的以下css代码

remove the position:relative; from #menu > ul > li line No 338

删除位置：相对;来自#menu> ul> li line No 338

#menu > ul > li {
  float: left;
  padding: 6px 5px 5px 0;
  /* position: relative; */ /* Remove this property */
  z-index: 0;
}

and set z-index:10 to #menu > ul > li > div line No 364

并将z-index：10设置为#menu> ul> li> div line No 364

#menu > ul > li > div {
 z-index:10;
}

#2

You will need to make some changes to your stylesheet.

您需要对样式表进行一些更改。

After viewing the link and inspecting the code, i found you need to do the following:

查看链接并检查代码后，我发现您需要执行以下操作：

Remove the z-index property from these styles:

从这些样式中删除z-index属性：

#menu > ul > li

AND

和

#menu > ul > li > a

You do not need to declare z-index for either of these elements.

您不需要为这些元素中的任何一个声明z-index。

Then you need to set a z-index of 1 to the following like so:

然后你需要将z-index设置为1，如下所示：

#menu > ul > li > div {
  z-index: 1;
}

Once you have done that you will be able to see the dropdown menu over the menu titles and it won't be obscured.

完成后，您将能够看到菜单标题上的下拉菜单，它不会被遮挡。

#1