0

这个菜单（http://thepiratehenk.nl/pgwe/）的问题是，当我将子菜单悬停在右侧时，它会消失。

（它在 Internet Explorer 中也不起作用；这是下一个要解决的问题。）

4

2 回答 2

4

添加以下 CSS 规则：

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

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

两个主要问题

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

问题 #1

问题 #1 是由:hoveron 引起的li，但在其内部的标签上执行旋转（在同一元素上a没有and 旋转）。:hover这可以通过以下两种方式之一解决：

1a。暂时给当前菜单项（鼠标悬停）一个比任何其他菜单项更大的 z-index 值。这可以通过单独使用 CSS 来实现li:hover。

1b。旋转菜单li而不是a标签，然后取消旋转其中的子菜单ul标签（这样:hover和旋转在同一个元素上）。

问题 #2

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

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

小问题

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

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

首先，我建议简单地删除.naarlinks divs 并查看它如何影响页面。然后查看是否需要向子菜单ul标签添加任何样式以进行更正。

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

.navi nav li ul {
    padding: 3px 10px 3px 110px;
}
于 2013-03-09T20:46:18.857 回答
1

您不能将 div 元素作为无序列表中的第一个子元素。这就是为什么你的页面坏了。

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

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

不是这样的……

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

但是要回答您的问题-您的CSS中缺少一个tinnnnnny小东西...

.navi nav li ul:hover { display:block }

于 2013-03-09T21:27:13.690 回答