【问题标题】:Menu hover is not behaving correct, submenu hover disappears菜单悬停行为不正确,子菜单悬停消失
【发布时间】:2013-02-25 06:28:18
【问题描述】:

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

(它在 Internet Explorer 中也不起作用;这是下一个要解决的问题。)

【问题讨论】:

  • 子菜单增加z-index
  • 你能给我一个值吗?
  • 一个最可能不相关的问题:您有一个 .naarlinks div 直接嵌套在 ul 标记内。可以直接在ul 标记内的唯一元素是li 标记。这可能会或可能不会导致某些浏览器出现问题。
  • 简单的原因是我是一个完整的 css 新手,尤其是这种菜单。我不知道如何正确构建它。
  • 有人保存了我网站的整个css文件吗?我不小心把它和一个空白文档一起保存了。我没办法找回它。

标签: css menu hover submenu


【解决方案1】:

添加以下 CSS 规则:

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

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

两个主要问题

  1. 菜单项与其他菜单项重叠
  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;
}

【讨论】:

  • @jediah:在答案中添加了一些代码。看起来可以进行简单的 CSS 修复。
  • 英雄!那个z-index:2;做了实际的伎俩!但我知道这不是“最干净”的方法吗?
  • @jediah:我认为这是合适的解决方案,也是最干净的解决方案(花了一段时间才意识到这一点)。解决在ul 标记中包含div 的问题仍然是一个好主意,但这显然不是导致此问题的原因。您可以先尝试简单地删除每个 div,然后查看页面受到的影响。对于每个子菜单,您可能需要将 .naarlinks 类和相关的 CSS 样式移动到 ul
  • @jediah:我在答案中添加了更多信息,关于嵌套的div。 @blackhawk:谢谢! :)
  • 非常有用的马特!千恩万谢!从现在就寝时间开始,我将尝试从明天开始删除/重新执行 div。
【解决方案2】:

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

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

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

不是这样的……

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

但要回答您的问题 - 您的 css 中缺少一件小事...

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

【讨论】:

  • 我怎样才能用同样的效果替换那个div?
猜你喜欢
  • 2021-01-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-02-06
  • 1970-01-01
  • 2013-05-01
  • 2017-01-02
  • 2019-07-16
相关资源
最近更新 更多