CSS下拉问题 - 当鼠标在它下面时掉线？

Question

我已经沉溺于此已经有一段时间了，我无法理解我的生活。

基本上，我有以下网站：http://tuivirtual.com/en/

如果您将鼠标移动到横幅图像的顶部，您会注意到下拉菜单会丢失，但不应该。只有当悬停在实际的

标签上时才会掉落，而不是在下面。

非常欢迎任何帮助！

谢谢！

Answer 1

一个简单的解决方案是给“.sub-nav-wrapper”一个负的“z-index”，并在悬停时为它添加一个正的“z-index”。

#navigation li .sub-nav-wrapper {
z-index: -1;}

#navigation li:hover .sub-nav-wrapper {
z-index: 10;}

这将解决问题，它将继续过渡。

Answer 2

元素仍然是'那里'，它的不透明度为0：

#navigation li .sub-nav-wrapper {   
    opacity: 0;
}

#navigation li:hover .sub-nav-wrapper {
    opacity: 1;
}

要解决此问题，请以其他方式隐藏。

Answer 3

尝试添加此CSS代码：

ul#navigation li div.sub-nav-wrapper {
    display: none;
}
ul#navigation li:hover div.sub-nav-wrapper {
    display: 1;
}

应该这样做。