CSS菜单在其他菜单项悬停时隐藏当前子菜单答案

【问题标题】：CSS menu hide current submenu when other menu item is hoveredCSS菜单在其他菜单项悬停时隐藏当前子菜单
【发布时间】：2013-04-19 01:48:16
【问题描述】：

我正在设计一个新网站，但我目前遇到以下问题：

在菜单中，当我打开带有子菜单的页面，然后悬停没有子菜单的菜单项时，我想显示一个空的灰色条。但我不知道如何做到这一点。要重现此内容，请访问此页面：http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html，然后将鼠标悬停在菜单中的主页项上。（主页没有子菜单，所以我希望灰色条为空。）

编辑

对不起，我的问题似乎很难理解。让我们再试一次：

在网页http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html 上有一个菜单，它始终显示当前子菜单，直到您将鼠标悬停在不同的子菜单上。这部分已经开始工作了。

但是当您将鼠标悬停在 Home 时，您仍然会看到：“ONTWIKKELING、HOGEDRUK SPUITIETEN、CNC-NABEWERKING 和 MONTAGE”。

这些是父“Processen”的子菜单项（这是当前活动的）

由于 home 没有任何子菜单项，我希望此栏为空。

【问题讨论】：

在 home 链接后面放一个空的 UL 和 LI 怎么样？
我不明白这个问题...你链接的页面有你想要重现的效果？
@BillyMoat 我不确定，菜单是由 joomla 生成的，我会看看是否可以编辑菜单模块来执行此操作。
@Joum 如果你转到我提供的页面，并将鼠标悬停在主菜单项上，不会有一个空的灰色条，但它会显示活动父项的子菜单。
所以你总是想显示当前部分的子菜单，即使你悬停在不同的部分？

标签： css joomla menu

【解决方案1】：

我认为您必须通过 javascript 执行此操作，您的 ul 上有 .active，那是您的 li 的父级，您的 a 的父级是什么所以为了更改要显示为.active 的子标记，您可以通过 javascript 执行此操作。我希望这是有道理的。

【讨论】：

【解决方案2】：

如果我理解正确，如果菜单部分没有子菜单，您只想显示下面的灰色条。

这个菜单是用嵌套的 UL 和 LI 标签和 CSS 来完成的，这是一种非常常见的技术。不过，我应该警告您，您链接的页面中的效果在 IE

如果您不想（或不知道）如何更改它，因为这意味着会弄乱 Joomla 的内部工作，我认为您可以做的是：首先在 HOME 下的“假”LI 内创建一个空 SPAN，然后，设置特定的（通过 HTML 中的 class 或 id 属性）宽度等于灰色条的 SPAN。然后将display:block; 设置为 SPAN。这必须在 SPAN 的父类中发生 :hover 事件时完成。

例如：如果将SPAN标签的class设置为hideme：

.menumenu li ul li .hideme { width: [width of the grey bar]; }

.menumenu li:hover ul li .hideme { display:block; }

它不漂亮，但它应该可以工作。

编辑我有正确的想法，但执行错误（早上太早）

你真正需要的是在HOME LI（即fakeUL）下为假UL提供一个唯一标识符，在其中嵌套一个LI来保存一个SPAN标签，定义它的大小带有width 属性的 SPAN 标记，然后 CSS 可能类似于：

.menumenu li .fakeUL li span { width: [width of the grey bar]; }

.menumenu li:hover .fakeUL li span { display:block; }

【讨论】：

这确实是我想要的。首先，我刚刚尝试了 IE6、IE7、IE8 和 IE9 中的网站。在 IE6 网站根本不工作，但我已经包含了一个栏告诉用户他们应该升级。在 IE7 中菜单可以工作，但唯一的问题是子菜单没有完全正确对齐：kvvikingvenlo.nl/joomla/knipsel.png 在 IE8 及更高版本中它所有工作。
关于您的解决方案，它给我带来了另一个可能也有效的想法。我已经有一个位于子菜单（.menubargrey）后面的 div，如果我可以更改那个的 z-index 使其位于子菜单的前面，那么子菜单将隐藏在它后面。我只是不知道如何在悬停不同的 div 时更改样式。
我真的不建议您使用 Z-index 来获得这种效果。请记住，此 UL>LI 具有您需要显示的相同级别的子菜单，因此有条件地对此进行编码并忘记其他可能是困难/艰苦的工作。这种方法有效吗？
我刚才注意到，这个解决方案实际上可能需要您为 HOME LI 设置一个唯一标识符，否则这将在每次第一级时显示灰色跨度LIs 悬停。

【解决方案3】：

我最终在 joomla 中创建了一个模板覆盖，以便它在菜单中插入一个空的 ul 标记。我认为这将是我拥有的最干净的选择。

要进行模板覆盖，请将文件 \modules\mod_mainmenu\tmpl\default.php 复制到 \templates\YOURTEMPLATE\html\mod_mainmenu\default.php

然后在你复制的文件中找到这段代码：

if (isset($path) && $node->attributes('id') == $path[0]) {
    $node->addAttribute('id', 'current');
} else {
    $node->removeAttribute('id');
}
$node->removeAttribute('rel');
$node->removeAttribute('level');
$node->removeAttribute('access');

并在它们之前添加这些行。

if (($node->name() == 'li') && !isset($node->ul)) {
    $node->addChild('ul ');
    $node->addChild('/ul');
}

希望我能帮助到任何人！

【讨论】：