这个菜单 (http://thepiratehenk.nl/pgwe/) 的问题是，当我将子菜单悬停在右侧时，它会消失。
（它在 Internet Explorer 中也不起作用；这是下一个要解决的问题。）
【问题讨论】：
z-index
.naarlinks div 直接嵌套在 ul 标记内。可以直接在ul 标记内的唯一元素是li 标记。这可能会或可能不会导致某些浏览器出现问题。
添加以下 CSS 规则：
.navi nav > ul > li:hover {
z-index: 2;
}
这可确保当前菜单项及其子菜单始终显示在其他菜单项之上。
两个主要问题
问题 #1
问题 #1 是由 li 上的 :hover 引起的，但在其中执行 a 标记的旋转（没有 :hover 和同一元素上的旋转）。这可以通过以下两种方式之一解决：
1a。暂时给当前菜单项（鼠标悬停）一个比任何其他菜单项更大的 z-index 值。这可以通过使用li:hover 单独使用 CSS 来实现。
1b。旋转菜单li 而不是a 标签，然后取消旋转其中的子菜单ul 标签（这样:hover 和旋转在同一个元素上）。
问题 #2
每个菜单项的底角位于前一个菜单项的子菜单上方。子菜单应始终位于所有菜单项之上。
上面提到的 1a 解决方案也可以解决问题 #2（在:hover 上将菜单li 的z-index 设置为更大的z-index。
小问题
上面的 cmets 和 @blackhawk 提到的另一个问题是将 .naarlinks div 直接嵌套在 ul 标记内。现在看来，这实际上与上述问题无关，但仍然不安全。除了在某些浏览器中导致奇怪行为的风险外，它还会阻止 HTML 验证。
.naarlinks div 似乎只有 padding-left: 100px;。我不确定该样式是否生效，因为 div 嵌套不正确，但如果您确实需要该样式，您可以尝试以某种方式将其添加到子菜单 ul。
首先，我建议您直接删除.naarlinksdivs，看看它对页面有何影响。然后看看是否需要在子菜单ul标签中添加任何样式来更正它。
删除divs 后，尝试将子菜单ul 中的填充更改为以下内容：
.navi nav li ul {
padding: 3px 10px 3px 110px;
}
【讨论】：
ul 标记中包含div 的问题仍然是一个好主意，但这显然不是导致此问题的原因。您可以先尝试简单地删除每个 div，然后查看页面受到的影响。对于每个子菜单，您可能需要将 .naarlinks 类和相关的 CSS 样式移动到 ul。
div。 @blackhawk：谢谢！ :)
您不能将 div 元素作为无序列表中的第一个子元素。这就是您的页面损坏的原因。
无序列表的基本结构通常如下所示...
<ul>
<li></li>
<li></li>
</ul>
不是这样的……
<ul>
<div>
<li></li>
<li></li>
</div>
</ul>
但要回答您的问题 - 您的 css 中缺少一件小事...
.navi nav li ul:hover { 显示：块 }
【讨论】：