CSS菜单隐藏在其他的菜单项徘徊当前子

我设计一个新的网站，但目前我有以下问题：CSS菜单隐藏在其他的菜单项徘徊当前子

在菜单中，当我打开一个网页，一个子菜单，然后悬停一个没有子菜单的菜单项我想显示一个空的灰色条。但我不知道如何做到这一点。要重现此操作，请转至此页：http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html，然后将鼠标悬停在菜单中的主页上。（家庭没有亚菜单，所以我想将灰色栏是空的。）

编辑

我很抱歉，我的问题似乎是相当费解。让我们再试一次：

在网页http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html有一个菜单，它总是显示当前的子菜单，直到你悬停不同的子菜单。这部分已经在工作。

但是当你悬停在家中时，你仍然会看到：“ONTWIKKELING，HOGEDRUK SPUITGIETEN，CNC-NABEWERKING和MONTAGE”。

这些都是家长“Processen”（这是当前的活动之一）

的子菜单项，因为家里没有任何的子菜单项，我想这个酒吧是空的，而不是。

来源

2013-04-25 Denny Beulen

如何在家庭链接之后放置一个空的UL和LI？ – 2013-04-25 08:45:04

我没有得到这个问题......你链接的页面有你想重现的效果吗？ – Joum 2013-04-25 08:45:21

@BillyMoat我不确定，菜单是由joomla生成的，我会看看如果我可以编辑菜单模块来做到这一点。 – 2013-04-25 08:49:19

我在作出最终templat e在joomla中覆盖，以便它在菜单中插入一个空的ul标签。我认为这将是我拥有的最干净的选择。

为了使模板覆盖复制文件\模块\ mod_mainmenu \ TMPL \如default.php到\模板\ 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'); 
}

希望我帮助过任何人！

来源

2013-05-17 08:05:01

我认为你将不得不通过JavaScript来做到这一点，你有你的ul.active那就是父母，你的li什么是父母的a所以为了改变孩子的标签显示为.active你会通过JavaScript做到这一点。我希望这是有道理的。

来源

2013-04-25 09:10:25 Tyler

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

这个菜单是用CSS嵌套的UL和LI标签完成的，它是一种非常常见的技术。但我应该提醒你，你链接的页面中的效果不能满足你在IE浏览器中需要的东西< 9.有几个纯粹的CSS菜单例子很容易达到这个目的。

如果你不想（或不知道）如何改变它，因为这意味着会破坏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; }

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

编辑我有个好主意，但错误的执行（早上太早）

你真正需要的是给下李家（即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; }

来源

2013-04-25 09:18:39 Joum

这确实是我想要的。首先，我刚刚尝试过IE6，IE7，IE8和IE9的网站。在IE6该网站根本没有工作，但我已经包括一个酒吧告诉用户他们应该升级。在IE7中的菜单工作，但唯一的问题是，子菜单不完全对齐：http://www.kvvikingvenlo.nl/joomla/knipsel.png 在IE8及更高版本中，它的所有工作。 – 2013-04-25 09:57:27

关于您的解决方案，它给我带来了另一个可能工作的想法。我已经在子菜单（.menubargrey）后面有一个div，如果我可以改变那个z-index，所以它出现在子菜单的前面，那么子菜单就会隐藏在它的后面。我只是不知道如何在悬停另一个div时更改样式。 – 2013-04-25 09:59:31

我不建议你使用Z-index来达到这个效果。请记住，UL> LI具有您需要显示的同级子菜单，因此可能很难/难以有条件地对此进行编码，而忽略其他。这种方法有效吗？ – Joum 2013-04-25 11:18:39

CSS菜单隐藏在其他的菜单项徘徊当前子

回答

相关问题