菜单悬停不正确，子菜单悬停消失

Question

此菜单（http://thepiratehenk.nl/pgwe/）的问题在于，当我将子菜单拖到右侧时，它会消失。

（它在Internet Explorer中也不起作用;这是下一个要修复的问题。）

Answer 1

添加以下CSS规则：

.navi nav > ul > li:hover {
    z-index: 2;
}

这可确保当前菜单项及其子菜单始终显示在其他菜单项的上方。

两个主要问题

1. 与其他菜单项重叠的菜单项
2. 菜单项与上一个菜单项的子菜单重叠

问题＃1

问题＃1是由:hover上的li引起的，但是对其中的a标记执行轮换（没有:hover并且轮换为相同的元素）。这可以通过以下两种方式之一解决：

1a上。暂时给出当前菜单项（鼠标结束）比任何其他菜单项更大的z-index值。使用li:hover单独使用CSS可能是可行的。

1b中。旋转菜单li而不是a标记，然后取消旋转其中的子菜单ul标记（以便:hover和旋转位于同一元素上）。

问题＃2

每个菜单项的底角位于上一个菜单项的子菜单上方。子菜单应始终位于所有菜单项之上。

上面提到的1a解决方案也可以解决问题＃2（将菜单li的z-index设置为z-index上更大的:hover。

次要问题

上述评论和@blackhawk提到的另一个问题是将.naarlinks div直接嵌套在ul标记内。现在看起来这实际上与上述问题无关，但是这样做仍然不安全。除了在某些浏览器中导致奇怪行为的风险之外，它还会阻止HTML验证。

.naarlinks div似乎只有padding-left: 100px;。我不确定该样式是否生效，因为div嵌套不正确，但如果确实需要该样式，可以尝试以某种方式将其添加到子菜单ul。 / p>

首先，我建议您只需删除.naarlinks div，然后查看它对页面的影响。然后，查看是否需要在子菜单ul标记中添加任何样式以进行更正。

删除div后，尝试将子菜单ul中的填充更改为以下内容：

.navi nav li ul {
    padding: 3px 10px 3px 110px;
}

Answer 2

您不能将div元素作为无序列表中的第一个子元素。这就是你的网页被破坏的原因。

无序列表的基本结构通常如下所示......

<ul>
<li></li>
<li></li>
</ul>

不喜欢这个......

<ul>
<div>
<li></li>
<li></li>
</div>
</ul>

但要回答你的问题 - 你在css中缺少一个小小的东西......

.navi nav li ul：hover {   显示：块 }