为什么下拉菜单与“容器” div 重叠时会变得透明？

Question

该试用网站上的菜单和一切都运行良好....但是当我单击菜单并出现下拉菜单项时，它的行为很奇怪。

以下是我目前汇总的内容：http://jsbin.com/tifuhute/36/

发生的情况是，与“容器”div 重叠的所有内容都变得透明，并且当我将鼠标悬停在它上面时不会作为菜单工作。还有另一个容器（称为“otrosidiomas”的容器）可以正常工作。所以，这个问题超出了我的范围。

任何想法我做错了什么？

Answer 1

那是因为您也将 #column1 设置为相对位置 - 并且由于与子列表相比，它的顺序更靠后，因此它将堆叠在子列表上方。一个技巧是为子列表分配一个非零的 z-index，比如 1，这将解决问题：

#menu ul li:hover ul {
    /* this is what makes the dropdown menu appear on hovering over it*/
    visibility: visible;
    z-index: 1;
}